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()は、リストの第２引数に"0"を指定すると、結果的に何もしないため、次のようにもっとシンプルに書けます。

this.users.splice(0, this.users.length)