Vue JS - Remove an object from the data array

Question

I am using VueJS to display active users in a site. When a user becomes active, Pusher sends JSON with their details -

{
 "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 token is sent along with available: false. I need to then remove them from my Vue data array, this is where I am stuck.

Here is the Data array in my Vue JS (pretty basic):

data: {
 responders: []
}

UPDATE Here 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.

@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:

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.

• michaelsnowden: Is the token ID the same for becoming active/inactive?
• NightMICU: Yes, same token for both - the token is how I was previously removing the user with plain jQuery
• DutGRIFF: I feel like you didn't supply enough code or describe it well enough for me to give you a good answer. Here is a fiddle that may help some: jsfiddle.net/qm8csjv9/1 And here is a fiddle where you can do it "from outside of the Vue methods" jsfiddle.net/qm8csjv9

Answer 1

Vue augments watched arrays with a $remove method that takes the numerical index as parameter. So you can find the index with something like:

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.

• nkconnor: Incorrect (at least for 1.0+), $remove's only argument is the item to remove, not the index vuejs.org/api/#array-remove-reference

Answer 2

// 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

• Array.prototype.find
• Array.prototype.$remove
• Array.prototype.$set

List rendering documentation

Answer 3

In vue 2.x.x, Array.prototype.$remove has been removed, You can use splice instead as answered here with vue 2.

once you find out the index, where you want to delete an item, you can simply use:

this.users.splice(index, 1)

Answer 4

Store your users in an object, instead of an array.

When a user signs in, users[user.token] = user

When a user signs out, users[user.token] = undefined

• NightMICU: I thought that Vue transformed the $data entries into objects? I'm using vm.$data.push(jsonData) to add users to the list
• NightMICU: If you could expand on this a bit further I'd really appreciate it.. I have attempted this but cannot figure it out. Thanks!
• NightMICU: I have updated my question with an attempt to understand what you're suggesting, I'd really appreciate any other information you can provide. Thanks!