Vue.js 2: Delete property from data object

Question

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)

Answer 1

The answer is:

Vue.delete(users, 'foo');

It took me a while to find it, that's why I'm posting it here ;-)
https://github.com/vuejs/vue/issues/3368#issuecomment-236642919

Answer 2

It's important to know that vm.$delete is a alias for Vue.delete and if you try something like this.delete() you will get a error. So in your example the answer would be:

this.$delete(this.users, 'foo')

or

vm.$delete(vm.users, 'foo')

https://vuejs.org/v2/guide/migration.html#vm-delete-changed

Answer 3

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