我正在尝试在 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);
}
不确定是否有更好的方法来完成此任务。
最佳答案
如果您将与会者设置为空对象 ({}
),它将没有 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);
关于json - VueJS - 难以理解 .$set 和 .$add,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30876561/