動態輸入，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">

但它不起作用。 如果您在“消息”輸入中寫入，則所有“消息”輸入都將被更新。

我怎樣才能只更新相關值？

感謝幫助 ！

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);
  }
}