添加项目来结束阵列动态

新来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()？

感谢您的帮助！

来源

2017-09-26 Sean

在添加* Pending *部分后，'status_arr'对象应该是什么样子？ – Phil

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

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

来源

2017-09-26 00:11:47 Phil

这正是我想要的。谢谢！ – Sean

@谢恩，不客气。看到这是不太可能，如果您尝试访问'status_arr触发错误备选方案，[其他答案]（https://stackoverflow.com/a/46416156/283366）。*之前* *已填充它 – Phil

您可以更改status_array这样：

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

而当你想要更多的项目加入到之前，你可以使用：

status_array.Pending.push(newEle)

请记住，Vue包装了观察数组的突变方法他们也会触发视图更新。被包装的方法有：

推（）
弹出（）
移（）
不印字（）
剪接（）
排序（）
反向（）

来源

2017-09-26 00:43:22 imcvampire

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');

来源

2017-09-26 06:16:13

添加项目来结束阵列动态

回答

相关问题