Question

我正在尝试在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);
                    }
                }
            }
        });

仅当我从attendees: {}中的data开始，但在添加与会者后尝试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

如果您将与会者设置为空对象（requested_word），则它将没有{}属性。该属性在Arrays上。

如果您将与会者设置为空数组（length），那么您需要使用$ set（或者实际上，我认为您需要.push（）） - $ add适用于不在数组上的对象

我不太关注你的上一个问题 - 你可以添加更多背景吗？

编辑2：

以下答案适用于Vue 1.x.对于Vue 2.x及更多用途：

[]

此处提供更多信息：https://vuejs.org/v2/api/#Vue-set

编辑：

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

this.$set(this.attendees, 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

2 个答案: