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

Question

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

比如我在新增items/objects时需要如下结构：

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

添加新对象以响应 AJAX 调用，returns 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);
}

不确定是否有更好的方法来完成此操作。

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

Answer 2

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

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

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

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

VueJS - trouble understanding .$set and .$add

json

vue.js