it-swarm.com.de

Vue.js 2: Eigenschaft aus Datenobjekt löschen

Wie können Sie eine Eigenschaft/einen Schlüssel aus einem Vue.js-Datenobjekt (d. H. Assoziatives Array) wie folgt löschen:

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

Beim Googeln habe ich zwei Möglichkeiten gefunden, aber beide funktionieren nicht:

  • delete this.users.foo; aktualisiert das DOM nicht
  • this.users.splice('foo', 1); funktioniert überhaupt nicht (funktioniert wahrscheinlich nur auf Arrays, nicht auf Objekten)
14
Thomas Landauer

Die Antwort ist:

Vue.delete(users, 'foo');

Ich habe eine Weile gebraucht, um es zu finden, deshalb poste ich es hier ;-)
https://github.com/vuejs/vue/issues/3368#issuecomment-236642919

35
Thomas Landauer

Es ist wichtig zu wissen, dass vm.$delete ein Alias ​​für Vue.delete ist. Wenn Sie etwas wie this.delete() versuchen, erhalten Sie eine Fehlermeldung. In Ihrem Beispiel wäre die Antwort also:

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

oder

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

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

2
Sadraque Santos

Sie müssen eine neue Kopie des Objekts erstellen, damit Sie Vue wissen können, dass es Änderungen gibt:

ES6

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

oder ohne spread operator wäre es

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