将元素添加到具有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>

用法： 我得到的截图

- Gnopps

Answer 1

问题在于使用array.push(declaredObject)时，您添加的是template的引用，因此每个更改都会反映在所有引用中。

您必须添加具有相同属性的新对象，有许多方法可以实现这一点，最常见的是Object.assign({}, this.template)，而最新的方法是解构对象{...this.template}。所以在您的情况下，应该是this.items.push({...this.template})。

- DobleL

---

解构模板对象似乎运行良好，谢谢！ - Gnopps

很高兴能帮到你！ - DobleL

谢谢。你救了我的一天。 - Bhavin Thummar

Answer 2

尝试

   this.items.push({
            name: "two",
             id: 2,
           });

使用this.items.push(this.template)代替，因为template属性是响应式的，它会影响使用它的其他属性

查看此fiddle

- Boussadjra Brahim

---

啊，当然：我忘记了使用对象时不需要克隆，只需引用同一个对象。谢谢你的帮助！ 我想这意味着我不能有一个模板对象，而必须在函数中即时创建它？ - Gnopps