Question

我正在尝试将对象（简单的键值对）添加到列表中。但是，v模型仍绑定到先前添加的对象，因此，如果我在“ ValueOne”上添加“ ObjectOne”，然后尝试在“ ValueTwo”中添加“ ObjectTwo”，则“ ObjectOne”将被编辑，而“ ObjectTwo”将被添加。

我绝不是JavaScript方面的专家，因此它可能与VueJS无关。

我显然可以使用a method per list来完成这项工作。

关键是我的模型有多个要编辑的键值对列表，因此我尝试制作一个通用方法：

addToList: function(value, list){
            console.log("Adding " + value + " to list "+list);
            list.push(value);
            value={};
        },

如果在“简单”列表（如字符串数组）上使用但不在“对象”列表上使用，则此方法有效。

我的猜测是，当我尝试清除“ value”而不是“ this.value”时，引用仍指向同一对象，但是由于我不知道调用时“ value”将是什么，因此我不不知道该怎么做。

Here是摆弄我的问题的小提琴。

我的目标是能够使用“ addToList”功能添加到任何列表，而不必为每个列表重新编写功能。

谢谢您的帮助。

Answer 1

以上行为是因为您每次添加新的待办任务时都会更新同一对象的值。您需要再次设置对象以添加新值，如下所示。

 addToList(value, todos){
    this.todos.push(value);
  this.anotherTodo={ text:'',
done:'false'}
}

正在工作的小提琴here。

Answer 2

我将其发布为答案，但是如果有人有更好的方法来做，我都会听到。

我通过在列表中添加手表解决了问题。当列表更改时，我将清理添加到其中的模型对象。

在生产工作中，我必须添加一个计算属性，因为我不能在对象的属性上添加监视，而是在所述计算属性上添加监视：

watch:{
    todos(){
        this.anotherTodo={};
    },

fiddle作为演示

将对象添加到数组（Vue-Js）时不清理V模型

2 个答案: