动态输入，v-model 更新 v-for 中的所有值

Question

我用 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">

但是没用。如果您写入 "message" 输入，所有 "message" 输入都将更新。

如何只更新相关值？

感谢帮助！

Answer 1

发生这种情况是因为 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);
  }
}

动态输入，v-model 更新 v-for 中的所有值

Dynamics inputs, the v-model update all values in v-for

javascript

vue.js

vuejs2

v-for

v-model