将元素添加到具有 v-model 的数组会导致重复

Question

我有一个通过 v-for 创建的文本输入字段列表，其中包含v-model一个数组。我想向数组添加元素，从而创建另一个输入字段。

到目前为止一切正常。问题是新的输入字段以某种方式都被分配了相同的索引 (?) 或者其他正在发生的事情导致它们显示相同的值。

我制作了这个 jsfiddle来展示我的意思。如果您按两次按钮，然后尝试编辑新输入框之一，则所有新输入框都将获得编辑后的值。我只想要编辑过的输入框来显示输入值。

我想我在这里忽略了一些东西。有没有人可以帮忙解决这个问题？

Javascript：

new Vue({
  el: '#app',
  data: {
    items: [{name: "one", id: 0}],
    template: {
        name: "two",
        id: 2,
    },
  },
   methods: {
    addRow: function(){
    this.items.push(this.template);
    this.items[this.items.length - 1].id = Math.random();
    }
  }
  })

HTML：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item,index) in items" :key="item.id">
  <input v-model="item.name">
  </div>
  <button v-on:click="addRow">
  Add row
  </button>
  <div>Array content: {{items}}</div>
</div>

用法： 我得到的截图

Answer 1

这里的问题是，array.push(declaredObject)您正在添加一个引用，template因此每个更改都将反映在其所有引用中。

您必须添加一个具有相同属性的新对象，您可以通过多种方式实现这一点，最常见的Object.assign({}, this.template)是Destructuring objects {...this.template}。所以在你的情况下应该是this.items.push({...this.template})