[Vuejs]-How to map complex data property in VueJs?

0👍

Based on the comments below, here is my updated answer. The key is that you will need a method to locate the index of the propertyType and if the property type is not found you can use v-if to not show the field. That v-if can be directly on the input field if it doesn’t contain a label or other adjacent markup to be suppressed or for more flexibility that v-if can be on a template tag as I have done below.

 <div id="app">
    <input v-model="property1" type="text" /><br />
    <template v-if="getIndex('type1') >= 0">
        Type 1:<input v-model="property2[getIndex('type1')].propertyValue" type="text" /><br />
    </template>
    <template v-if="getIndex('type2') >= 0">
        Type 2: <input v-model="property2[getIndex('type2')].propertyValue" type="text" /><br />
    </template>
 </div>


 var app = new Vue({
        el: '#app',
        data: {
            "property1": "property1value",
            "property2": [
                {
                    "propertyType": "type1",
                    "propertyValue": 10
                },
                {
                    "propertyType": "type2",
                    "propertyValue": 20
                }
            ]
        },
        methods: {
            getIndex: function (propType) {
                var i = 0;
                while (i < this.property2.length) {
                    if (this.property2[i].propertyType == propType) {
                        return i;
                    }
                    i++;
                }
                return -1;
            }

        }
  });
👤RonC

Leave a comment