Vue.js 2: удалить свойство из объекта данных

Как вы можете удалить свойство/ключ из объекта данных Vue.js (т.е. Ассоциативный массив) следующим образом:

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

Гуглинг вокруг, я нашел эти два пути, но оба не работают:

delete this.users.foo; не обновляет DOM
this.users.splice('foo', 1); вообще не работает (возможно, работает только на массивах, а не на объектах)

Ответ 1

Ответ:

Vue.delete(users, 'foo');

Мне потребовалось некоторое время, чтобы найти его, поэтому я публикую его здесь ;-)
https://github.com/vuejs/vue/issues/3368#issuecomment-236642919

Ответ 2

Важно знать, что vm.$delete является псевдонимом для Vue.delete и если вы попробуете что-то вроде этого this.delete() вы получите ошибку. Так что в вашем примере ответ будет:

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

или же

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

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

Ответ 3

Вы должны создать новую копию объекта, чтобы Vue могла знать, что есть изменения:

ES6

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

или без оператора распространения это было бы

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