Vue.jsで配列をリアクティブに保つポイント
Vue.jsの配列操作でちょこっとハマったのでメモ。
dataに配列を定義した時、リアクティブデータとしてリアルタイムに更新されるようにするにはいくつか制約があるので注意が必要。配列を操作する場合は以下のメソッドを使えばVue.jsが変更を検知してくれる。つまりはリアクティブデータとしてリアルタイムに変更が反映される。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
ところが、直接indexを指定して中身を書き換えたり
items[2] = 'foo'配列を空にするためにlengthを0にしたり
items.length = 0上記のやり方はVue.jsが配列の変更を検知できないので、リアクティブデータとして反映されない。これはJavascriptの言語仕様上の制約らしい。
Vue.jsで配列の中身をまるっと空にしたい場合はsplice()を使って以下のように書く。
items.splice(0)splice()の第一引数は削除開始する位置。第二引数は配列から削除する要素の数となる。第二引数を指定しない場合は第一引数で指定した位置から後ろ全てが削除される。items.splice(0)とだけ書けば配列の中身を空っぽにしてくれる。最初items.length=0で配列を空にするやり方でやってて変更が反映されないのでちょっとハマった。
Vue.jsはsplice()を使っての変更はちゃんと検知してくれるので、Vue.jsを使ってリアクティブデータを保ったまま配列を空にしたい人はお試しあれ。
