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

Posted 2023-02-22

【中文标题】将元素添加到具有 v-model 的数组会导致重复

【英文标题】：Adding element to array that has v-model causes duplicate

【发布时间】：2019-04-25 11:24:46

【问题描述】：

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

到目前为止一切正常。问题是新的输入字段不知何故都被分配了相同的索引（？），或者发生了其他事情导致它们显示相同的值。

我创建了this 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>

用法： screenshot of what i'm getting

【参考方案1】：

试试

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

而不是this.items.push(this.template)，因为template 属性是反应性的，它会影响使用它的其他属性

检查这个fiddle

【讨论】：

啊，当然：我忘记了你不克隆的对象，你只是引用同一个对象。谢谢您的帮助！我想这意味着我不能拥有模板对象，但必须在函数中动态创建它。？

【参考方案2】：

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

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

【讨论】：

解构模板对象似乎效果很好，谢谢！

很高兴它有帮助！

谢谢。你拯救了我的一天。