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
- [Vuejs]-How to destroy Swiper slider for VueJS
- [Vuejs]-Add a callback to a Vue instance's destroy hook
Source:stackexchange.com