¿Cómo puede eliminar una propiedad/clave de un objeto de datos Vue.js (es decir, matriz asociativa) como este:
var vm = new Vue({ data: { users: { foo : { firstName: ..., lastName: ... }, bar : { firstName: ..., lastName: ... } } }, methods: { someFunction : function () { // how to remove `users.foo`? } } });Buscando en Google, encontré estas dos formas, pero ambas no funcionan:
delete this.users.foo; no está actualizando el DOMthis.users.splice('foo', 1); no funciona en absoluto (probablemente solo funciona en matrices, no en objetos)La respuesta es:
Vue.delete(users, 'foo'); Me tomó un tiempo encontrarlo, por eso lo estoy publicando aquí ;-)
https://github.com/vuejs/vue/issues/3368#issuecomment-236642919
Es importante saber que vm.$delete es un alias para Vue.delete y si intenta algo como this.delete() obtendrá un error. Entonces, en tu ejemplo, la respuesta sería:
this.$delete(this.users, 'foo')o
vm.$delete(vm.users, 'foo')Debe crear una nueva copia del objeto para que Vue pueda saber que hay cambios:
ES6
const users = { ...this.users }; delete users['foo']; this.users = userso sin operador de propagación sería
const users = Object.assign({}, this.users); delete users['foo']; this.users = users