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

Question

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

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

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

添加新对象以响应返回 JSON 格式与上述相同的 AJAX 调用。这是我的 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://v2.vuejs.org/v2/api/#Vue-set

编辑:

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

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