Question

Vuejs的新手，对更新数组有疑问。

这是我的数据（status_arr）：

{
    "Approvals": [
        {
            "name": "Section 1",
            "count": 10692
        }
    ],
    "Declines": [
        {
            "name": "Section 1",
            "count": 1212
        },
        {
            "name": "Section 2",
            "count": 5
        }
    ]
}

我需要动态添加上述数据的"Pending"部分。我不太了解如何实现这一目标的$set方法。我需要添加到上面的数据集而不影响其中的其余数据。

文档说要使用：

this.$set(status_arr, itemIndex, [ { 'name': 'Section 1', 'count': 0 } ]);

不确定如何添加附加数据的Pending部分，如果我正在添加数组，那么我怎么会有itemIndex这样做？是否有this.$add函数或类似于pop()的内容？

感谢您的帮助！

Answer 1

如果我正确理解你的问题，你想要

this.$set(this.status_arr, 'Pending', [{
  name: 'Section 1',
  count: 0
}])

Answer 2

您可以将status_array更改为：

{
    "Approvals": [
        {
            "name": "Section 1",
            "count": 10692
        }
    ],
    "Declines": [
        {
            "name": "Section 1",
            "count": 1212
        },
        {
            "name": "Section 2",
            "count": 5
        }
    ],
    "Pending": []
}

当您想要向Pending添加更多项目时，您可以使用：

status_array.Pending.push(newEle)

请记住，Vue包含观察到的数组的变异方法，因此它们也会触发视图更新。包装的方法是：

push（）
pop（）
shift（）
unshift（）
splice（）
sort（）
反向（）

Answer 3

Vue不允许向已创建的实例动态添加新的根级别响应属性。但是，可以使用Vue.set或this。$ set将反应属性添加到嵌套对象。这就是我实现它的方式：
用于返回所需对象的构造函数

 addObj(name, count) {
     return {
         name: name,
         count: count
     }
 }

调用此函数

var newObj = new this.addObj('tom', 6);
this.$set(this.status_arr, 'Pending', newObj);

如果你想删除一个密钥值对：

this.$delete(this.status_arr, 'Pending');

动态地将项添加到数组的末尾

3 个答案: