javascript Vue JS - 从数据数组中删除一个对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30536989/
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
Vue JS - Remove an object from the data array
提问by NightMICU
I am using VueJS to display active users in a site. When a user becomes active, Pusher sends JSON with their details -
我正在使用 VueJS 来显示站点中的活跃用户。当用户变得活跃时，Pusher 发送带有他们详细信息的 JSON -
{
"token": "97LbfNs7pfPbzVLo",
"first_name": "Joe",
"last_name": "Smith",
"avatar": "http://demo.com/avatar.jpg",
"phone": "255-255-2555",
"available" : true,
"agencies": [
{
"name": "Some company",
"slug": "some-company"
}
]
}
When the user signs out, their tokenis sent along with available: false. I need to then remove them from my Vue dataarray, this is where I am stuck.
当用户退出时，他们token会与 一起发送available: false。然后我需要从我的 Vuedata数组中删除它们，这就是我被卡住的地方。
Here is the Data array in my Vue JS (pretty basic):
这是我的 Vue JS 中的 Data 数组（非常基本）：
data: {
responders: []
}
UPDATEHere is a very basic idea of what I'm trying to accomplish, only from outside of the Vue methods. Basically I just need to remove an item from the data array, I think this is more of a Javascript related issue more than it is specific to Vue.
更新这是我正在尝试完成的一个非常基本的想法，仅在 Vue 之外methods。基本上我只需要从数据数组中删除一个项目，我认为这更像是一个与 Javascript 相关的问题，而不是它特定于 Vue。
@michaelsnowden made the suggestion to store users as objects instead of an array but I'm not sure how to accomplish this. I have attempted:
@michaelsnowden 建议将用户存储为对象而不是数组，但我不确定如何实现。我尝试过：
addUser: function() {
var user = {'asdasdasdop': {name: "Joe"}};
this.users.push(user);
}
Which gives me:
这给了我：
"users": [
{
"asdasdasdop": {
"name": "Joe"
}
}
],
But beyond this I cannot figure out how to access these values or remove an item from the array based on the token. Any help would be greatly appreciated - I've had no issues adding but cannot for the life of me figure out how to remove something.
但除此之外，我无法弄清楚如何根据令牌访问这些值或从数组中删除项目。任何帮助将不胜感激 - 我没有添加任何问题，但我一生无法弄清楚如何删除某些东西。
回答by Diego Casta?o
Vue augments watched arrays with a $remove method that takes the numerical index as parameter. So you can find the index with something like:
Vue 使用以数字索引作为参数的 $remove 方法增加了被观察的数组。因此，您可以使用以下内容找到索引：
var userToken ='potato';
var tokenToRemove;
users.forEach(function(user, index) {
if(userToken === user.token) {
tokenToRemove = index;
}
});
users.$remove(tokenToRemove);
so you would find in any way you can the index of the user with the token potato , and with that use the $remove method.
因此，您可以通过任何方式找到用户的索引，并使用标记土豆，然后使用 $remove 方法。
回答by nkconnor
// hook into pusher
ready: () => {
var self = this;
socket.bind('new-user', (user) => {
self.addUser(user)
})
},
methods: {
addUser: (user) => {
this.users.push(user)
},
deleteUserByToken: (token) => {
var user = this.findByToken(token);
if (user != 'undefined') {
this.users.$remove(user);
} else {
//
}
},
findByToken: (token) => {
this.users.find((usr) => {
return usr.token === token
});
}
}
API Reference
API 参考
回答by Saurabh
In vue 2.x.x, Array.prototype.$removehas been removed, You can use spliceinstead as answered herewith vue 2.
在 vue 2.xx 中，Array.prototype.$remove已删除，您可以使用vue 2splice代替这里的回答。
once you find out the index, where you want to delete an item, you can simply use:
找到index要删除项目的位置后，您可以简单地使用：
this.users.splice(index, 1)
回答by michaelsnowden
Store your users in an object, instead of an array.
将您的用户存储在一个对象中，而不是一个数组中。
When a user signs in, users[user.token] = user
当用户登录时，users[user.token] = user
When a user signs out, users[user.token] = undefined
当用户退出时，users[user.token] = undefined
