Vue.jsでarray.length=0の変更を検知しない

2019年7月30日火曜日

javascript Vue.js

t f B! P L

Vue.jsでarray.length=0の変更を検知しない

タイトルの通りですが、Vueでリストをクリアするとき、array.length = 0としても変更が検知されず画面の再描画が行われない問題(仕様)があります。この記事では、Vueで変更が検知されるリストのクリア方法について紹介します。

リストの変更が検知される関数

Vueの公式ドキュメントの記載があります。
Vue は画面の更新もトリガするために、監視された配列の変更メソッドを抱合 (wrap) します。抱合されたメソッドは次のとおりです:
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

変更が検知されるリストのクリア方法

リストから要素を削除する splice()関数は変更を検知してくれるため、次のよう書けそうです。
if (this.users.length > 0) {
  this.users.splice(0, this.users.length)
}
splice()は、リストの第2引数に"0"を指定すると、結果的に何もしないため、次のようにもっとシンプルに書けます。
this.users.splice(0, this.users.length)
スポンサーリンク

QooQ