时间戳

首页 > 解决方案 > 将对象添加到数组时未清理 V-Model (Vue-Js)

vue.js - 将对象添加到数组时未清理 V-Model (Vue-Js)

问题描述

我正在尝试将对象（简单的键值对）添加到列表中。但是，v-model 仍然绑定到先前添加的对象，所以如果我添加“ObjectOne”和“ValueOne”，然后尝试添加“ObjectTwo”和“ValueTwo”，“ObjectOne”被编辑并且“ObjectTwo”被添加.

我绝不是 Javascript 方面的专家，所以它可能与 VueJS 无关。

我显然可以使用每个列表的方法来完成这项工作。

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

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

此方法适用于“简单”列表（如字符串数组），但不适用于“对象”列表。

我的猜测是，当我尝试清理“value”而不是“this.value”时，引用仍然指向同一个对象，但是由于我不知道调用时会是什么“value”，所以我不知道这个怎么做。

这是重新创建我的问题的小提琴。

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

谢谢您的帮助。

标签： vue.js

解决方案

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

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

在这里工作小提琴。

推荐阅读