VueJS - 难以理解 .$set 和 .$add答案

【问题标题】：VueJS - trouble understanding .$set and .$addVueJS - 难以理解 .$set 和 .$add
【发布时间】：2015-09-01 19:14:29
【问题描述】：

我正在尝试在 VueJS 中构建一个对象数组，但遇到了 .$set 和 .$add 的一些问题。

例如，我在添加新项目/对象时需要以下结构：

{
  "attendees": {
    "a32iaaidASDI": {
      "name": "Jane Doe",
      "userToken": "a32iaaidASDI",
      "agencies": [
        {
          "name": "Foo Co"
        }
      ]
    }
  }
}

添加新对象以响应 AJAX 调用，该调用返回格式与上述相同的 JSON。这是我的 Vue 实例：

var vm = new Vue({
            el: '#trainingContainer',
            data: {
                attending: false,
                attendees: {}
            },
            methods: {
                setParticipantAttending: function(data)
                {
                    if (data.attending)
                    {
                        this.attendees.$add(data.userToken, data);
                    } else {
                        this.attendees.$delete(data.userToken);
                    }
                }
            }
        });

这仅适用于我在data 中以attendees: {} 开头，但是当我在添加与会者后尝试attendees.length 时，我收到undefined。如果我使用attendees: []，则似乎没有添加新对象。最后，如果我使用.$set(data.userToken, data)，它不会添加所需的'token':{data..} 格式。

这可能是什么问题？从空对象数组开始时，使用$.add 的正确方法是什么？

更新

我发现如果我设置 attendees: {} 然后在添加新对象时，它会起作用

if (data.userToken in this.attendees) {
    this.attendees.$set(data.userToken, data);
} else {
    this.attendees.$add(data.userToken, data);
}

不确定是否有更好的方法来实现这一点。

【问题讨论】：

$add 不再存在 (v0.6.0)

标签： json vue.js

【解决方案1】：

如果您将参加者设置为空对象 ({})，它将没有 length 属性。该属性在数组上。

如果您将参加者设置为一个空数组 ([])，那么您需要使用 $set（或者实际上，我认为您需要 .push()）——$add 旨在用于不在数组上的对象。

我没有完全听懂你的最后一个问题——你能补充更多上下文吗？

编辑 2：

下面的答案是针对 Vue 1.x。对于 Vue 2.x 及更高版本的使用：

this.$set(this.attendees, data.userToken, data);

更多信息在这里：https://vuejs.org/v2/api/#Vue-set

编辑：

响应您的更新，您应该能够在所有情况下只使用 $set。 IE。这样做：

this.attendees.$set(data.userToken, data);

【讨论】：

查看更新。我需要能够访问列表中每个项目的唯一键，以便我可以删除它。我发现我可以使用Object.keys(this.attendees).length 获取与会者人数。我还发现如果新与会者不在列表中，我必须使用$add，否则$set。
链接已损坏。
更新了答案。

【解决方案2】：

从 0.6.0 版开始，这似乎是正确的方法：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

http://vuejs.org/guide/reactivity.html#Change_Detection_Caveats

【讨论】：