Vuejs And Html Creating A Complex Json Object Dynamically And Displaying The Same To User Using V-for

I am developing a Vuejs application within which I have a field. For this field, users can provide the values and this field expands dynamically based on the user-provided values.

Solution 1:

To display data recursively, you need to use recursive components.

Abstract your v-for code into another component file (let's call it NodeComponent.vue). Pass your extensionList to this component, then inside this component, add another NodeComponent for each extension which has type complex.

Since your extension would be another array if it is complex, you can pass it directly into this NodeComponent as a prop and let recursion work its magic.

NodeComponent.vue

<template><div><divv-for="extension in extensionList":key="extension.ID"class="form-inline"
    ><span>{{ extension.namespace + ":" + extension.localName }}</span><inputv-if="extension.dataType == 'string'"type="text"
        @input="$emit('AddExtensionText', {$event, id: extension.ID}"
      /><NodeComponentv-if="extention.dataType == 'complex'":extentionList="extension" @AddExtensionText="AddExtensionText($event)"/><buttonv-if="extension.dataType == 'complex'"
        @click="AddComplextExtension(extension.ID)"
      >
        Add another
      </button></div></div></template><script>exportdefault {
  props: {
    extensionList: Array,
    extension: Object,
  },
  methods: {
    AddComplextExtension(extensionID) {
      // Emit event on root to show modal, or use this.$bvModal.show('modal-id') or create a dynamic modal, see: https://bootstrap-vue.org/docs/components/modal#message-box-advanced-usage
    }
    AddExtensionText({ value, id }) {
      const i = this.extensionList.findIndex((el) => el.ID === id);
      this.$set(extensionList, i, value);
    }
  }
};
</script>

Note that I emit a custom event from child NodeComponents on changing input text so that the parent can make this change in its extensionList array, using this.$set to maintain reactivity.

EDIT: If you want to add new Node components:

You need to have a parent component that holds the first NodeComponent in it. In here you'll define the modal (if you define it inside NodeComponent, you'll have a separate modal reference for each NodeComponent. Judging from your code you're probably using Bootstrap-Vue, it injects modals lazily when shown, so I don't think this will affect your performance too much, but it still doesn't feel like good code.). You need to emit event on root to show the modal. You need to send the extensionList as payload with this event like this: this.$root.emit('showModal', extensionList). In you parent component you can listen to the event and show the modal. Now inside your submitExtension function, you can use this extensionList and push a new object to it. The corresponding NodeComponent will update itself since arrays are passed by reference.

this.$root.on('showModal`, (extensionList) => {
    this.editExtensionList = extensionList;
    showModal = true;
}

    submitExtension() {
      this.showModal = falseconst extensionObj = {}
      extensionObj.ID = this.extensionCount
      extensionObj.namespace = this.extension.namespace
      extensionObj.localName = this.extension.localName
      extensionObj.dataType = this.extension.dataType
      this.editExtensionList.push(extensionObj)
      this.extensionCount++
    }

All being said, at this point it might be worthwhile to invest in implementing a VueX store where you have a global extentionList and define mutations to it.