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.

Yes, same token for both - the token is how I was previously removing the user with plain jQuery — NightMICU, May 29 '15 at 18:55
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: http://jsfiddle.net/qm8csjv9/1/ And here is a fiddle where you can do it "from outside of the Vue methods" http://jsfiddle.net/qm8csjv9 — DutGRIFF, Jun 09 '15 at 06:12

score 2 · Answer 1 · answered Jun 23 '15 at 15:26

2

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.

answered Jun 23 '15 at 15:26

Diego Castaño

46
4

**Incorrect** (at least for 1.0+), `$remove`'s only argument is the item to remove, not the index http://vuejs.org/api/#array-remove-reference – nkconnor Jul 19 '16 at 18:55

score 2 · Answer 2 · answered Jul 19 '16 at 19:16

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

List rendering documentation

score 1 · Answer 3 · edited Jul 16 '22 at 02:05

1

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)

edited Jul 16 '22 at 02:05

tony19

125,647
18
229
307

answered Jan 14 '17 at 09:48

Saurabh

71,488
40
181
244

score 0 · Answer 4 · answered May 29 '15 at 19:04

0

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

answered May 29 '15 at 19:04

michaelsnowden

6,031
2
38
83

I thought that Vue transformed the `$data` entries into objects? I'm using `vm.$data.push(jsonData)` to add users to the list – NightMICU May 29 '15 at 19:06
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 May 30 '15 at 00:15
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! – NightMICU May 30 '15 at 15:50

Vue JS - Remove an object from the data array

4 Answers4