json VueJS - 难以理解 .$set 和 .$add
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30876561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS - trouble understanding .$set and .$add
提问by NightMICU
I am trying to build an array of objects in VueJS and I am running into some issues with .$setand .$add.
我正在尝试在 VueJS 中构建一个对象数组，但我遇到了一些与.$set和 相关的问题.$add。
For example, I need the following structure when adding new items/objects:
例如，我在添加新项目/对象时需要以下结构：
{
"attendees": {
"a32iaaidASDI": {
"name": "Jane Doe",
"userToken": "a32iaaidASDI",
"agencies": [
{
"name": "Foo Co"
}
]
}
}
}
New objects are added in response to an AJAX call that returns JSON formatted the same as above. Here is my Vue instance:
添加新对象以响应 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);
}
}
}
});
This only works if I start with attendees: {}in my databut when I try attendees.lengthafter adding an attendee, I receive undefined. If I use attendees: [], the new object does not appear to be added. And lastly, if I use .$set(data.userToken, data)it does not add in the 'token':{data..}format required.
这仅在我开始时有效attendees: {}，data但是当我attendees.length在添加与会者后尝试时，我收到undefined. 如果我使用attendees: []，则似乎不会添加新对象。最后，如果我使用.$set(data.userToken, data)它不会添加'token':{data..}所需的格式。
What could be the issue here? What is the correct way to use $.addwhen starting with an empty array of objects?
这里可能是什么问题？$.add从空对象数组开始时使用的正确方法是什么？
UPDATE
更新
I found that it works if I set attendees: {}and then, when adding a new object,
我发现如果我设置attendees: {}然后在添加新对象时它会起作用
if (data.userToken in this.attendees) {
this.attendees.$set(data.userToken, data);
} else {
this.attendees.$add(data.userToken, data);
}
Not sure if there is a better way to accomplish this.
不确定是否有更好的方法来实现这一点。
回答by David K. Hess
If you set attendees to an empty object ({}) it will not have a lengthattribute. That attribute is on Arrays.
如果您将与会者设置为空对象 ( {})，它将没有length属性。该属性位于数组上。
If you set attendees to an empty array ([]) then you need to use $set (or really, I think you want .push()) – $add is intended for use on objects not on arrays.
如果您将与会者设置为一个空数组 ( [])，那么您需要使用 $set （或者实际上，我认为您想要 .push()） - $add 用于对象而不是数组。
I'm not quite following your last question?–?could you add more context?
我不是很在意你的最后一个问题？-？你能添加更多上下文吗？
EDIT 2:
编辑2：
The answer below was for Vue 1.x. For Vue 2.x and greater use:
下面的答案是针对 Vue 1.x 的。对于 Vue 2.x 及更高版本的使用：
this.$set(this.attendees, data.userToken, data);
More information here: https://vuejs.org/v2/api/#Vue-set
更多信息在这里：https: //vuejs.org/v2/api/#Vue-set
EDIT:
编辑：
Responding to your update, you should be able to just use $set in all cases. I.e. just do this:
响应您的更新，您应该能够在所有情况下只使用 $set。即只是这样做：
this.attendees.$set(data.userToken, data);
回答by MECU
As of version 0.6.0, this seems to be the correct way:
从 0.6.0 版开始，这似乎是正确的方法：
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
http://vuejs.org/guide/reactivity.html#Change_Detection_Caveats
http://vuejs.org/guide/reactivity.html#Change_Detection_Caveats
