我使用 Vue.js 2 尝试以下代码:
<div id="app">
<div v-for="(item, index) in items">
<div>
<input type="text" v-model="items[index].message">
<input type="text" v-model="items[index].surface">
</div>
</div>
<button @click="addNewfield">Add</button>
</div>
var app = new Vue({
el: '#app',
data: {
item: {
message: 'test',
surface: 45
},
items: [],
},
mounted() {
this.items.push(this.item)
},
methods: {
addNewfield() {
this.items.push(this.item);
}
}
})
目标是当用户单击“添加”按钮时创建新闻输入。我尝试了不同的方法,例如:
<input type="text" v-model="item.message">
但是这不起作用。如果您在“消息”输入中写入,则所有“消息”输入都会更新。
如何只更新相关值?
感谢您的帮助!
最佳答案
发生这种情况是因为 Javascript 中的对象是通过引用存储的。这意味着每次将 this.item
插入数组时,它都会添加对与上次完全相同的对象的引用。
您可以通过每次创建一个新对象来避免这种情况:
methods: {
addNewfield() {
const obj = {
message: 'test',
surface: 45
}
this.items.push(obj);
}
}
另一种选择是每次都克隆原始对象,例如:
methods: {
addNewfield() {
const clone = Object.assign({}, this.item);
this.items.push(clone);
}
}
关于javascript - 动力学输入,v-model更新v-for中的所有值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56578265/