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 DOMthis.users.splice('foo', 1); is not working at all (probably only works on arrays, not on objects)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
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')
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