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

2021年11月23日火曜日

javascript Vue.js

t f B! P L

タイトルの通りですが、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)
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ