Vue.js 2: Delete property from data object

user_1668200 0
Viewed 70824

How can you delete a property/key from a Vue.js data object (i.e. associative array) like this:

var vm = new Vue({
    data: {
        users: {
            foo : { firstName: ..., lastName: ... },
            bar : { firstName: ..., lastName: ... }
        }
    },
    methods: {
        someFunction : function ()
        {
            // how to remove `users.foo`?
        }
    }
});

Googling around, I found these two ways, but both don't work:

  • delete this.users.foo; is not updating the DOM
  • this.users.splice('foo', 1); is not working at all (probably only works on arrays, not on objects)
vuejs2 vue.js javascript
3 Answers
user_55621910

You have to create a new copy of the object so Vue be able to know that there are changes:

ES6

const users = { ...this.users };
delete users['foo'];
this.users = users

or without spread operator it would be 

const users = Object.assign({}, this.users);
delete users['foo'];
this.users = users
user_11780810
Related