web-dev-qa-db-ja.com

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`?
        }
    }
});
_

グーグルで、私はこれらの2つの方法を見つけましたが、両方とも機能しません：

  • _delete this.users.foo;_はDOMを更新していません
  • this.users.splice('foo', 1);はまったく動作していません（おそらくオブジェクトではなく配列でのみ動作しています）
javascriptvue.jsvuejs2
28
Thomas Landauer

答えは：

Vue.delete(users, 'foo');

それを見つけるのにしばらく時間がかかりました、だからここに投稿しています;-)
https://github.com/vuejs/vue/issues/3368#issuecomment-236642919

55
Thomas Landauer

_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

18
Sadraque Santos

オブジェクトの新しいコピーを作成する必要があるため、Vue変更があることを知ることができます。

ES6

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

またはスプレッド演算子なし

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