Javascript 动力学输入时，v模型将更新v-for中的所有值

我使用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);
    }
  }
})

添加
var app=新的Vue({
el:“#应用程序”，
数据：{
项目：{
消息：“测试”，
地面：45
},
项目：[]，
},
安装的（）{
this.items.push（this.item）
},
方法：{
addNewfield（）{
this.items.push（this.item）；
}
}
})

目标是在用户单击Add按钮时创建新闻输入。我尝试了不同的方法，比如：

<input type="text" v-model="item.message">

但它不起作用。如果您写入“消息”输入，所有“消息”输入都将更新

如何仅更新相关值

---

谢谢你的帮助

之所以发生这种情况，是因为Javascript中的对象是通过引用存储的。这意味着每次将

This.item

推到数组上时，它都会添加一个与上一个对象完全相同的引用

您可以通过每次创建一个新对象来避免这种情况：

方法：{
addNewfield（）{
常量对象={
消息：“测试”，
地面：45
} 
此.items.push（obj）；
}
}

另一种选择是每次克隆原始对象，如：

方法：{
addNewfield（）{
const clone=Object.assign（{}，this.item）；
此.items.push（克隆）；
}
}

伙计，你太棒了。谢谢你的解释！祝您今天过得愉快