CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Thomas Landauer
Thomas Landauer

Reputation: 8355

Vue.js 2: Delete property from data object

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:

Upvotes: 95

Views: 87507

Answers (3)

Sadraque Santos
Sadraque Santos

Reputation: 1849

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://v2.vuejs.org/v2/guide/migration.html#vm-delete-changed

Upvotes: 108

Maksim Bazarov
Maksim Bazarov

Reputation: 369

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

Upvotes: 4

Thomas Landauer
Thomas Landauer

Reputation: 8355

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

Upvotes: 187

Related Questions