How to handle v-model in dynamic input fields
Solution 1:
Take a look at following snippet with simple dynamic v-models pls:
new Vue({
el: "#demo",
data() {
return {
contentFields: [{name: '', desc: ''}]
}
},
methods: {
addInput() {
let newI = this.contentFields.length
this.contentFields.push({name: '', desc: ''})
},
setD() {
console.log(this.contentFields)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="addInput">add</button>
<div v-for="(content, i) in contentFields" :key="i">
<div>Content {{ i }}</div>
<input
v-model="content.name"
outlined
type="text"
dense
@change="setD"
/>
<input
v-model="content.desc"
outlined
type="text"
dense
@change="setD"
/>
</div>
</div>