【Vue】オブジェクト追加・削除には注意が必要👮 の配列版です。
オブジェクトと同じく、参照するだけなら普通のJSと同だが、要素の追加・削除で嵌るポイントがあったので備忘録として。
↓の記事も参考に。
次のようなVueインスタンスのdata()にcharasという空の配列がセットしてあるとする。
exportdefault{data(){return{charas:[]}}}要素を追加する
オブジェクトでは$setを使ったが、追加するときは末尾であれば通常通りpush()でOKらしい。先頭に追加などは試していないのでわからず。
// 通常通り、`push`を使えばOKthis.charas.push('範馬刃牙')要素をまとめて追加したい
スプレッド演算子...を使って配列を展開した要素をpush()で追加すればOK。
// まとめて要素を追加するthis.charas.push(...['範馬勇次郎','列海王'])要素を変更する
要素を変更したい時、いつも通りインデックスを使ってしまいたくなるがこれだとリアクティブにデータが反映されない（＝データ更新してもテンプレート（画面）上に反映されない）。
splice()を使う。
構文は<配列>.splice(<始まりのインデックス>, <変更する要素数>, <変更後の要素>)と書くとのこと。
（書き方をいつも忘れてしまう）
見ての通り複数個まとめて変更することもできる。
// リアクティブにデータが反映されないのでこの書き方はダメthis.charas[0]='範馬勇一郎'// これだとリアクティブになるthis.charas.splice(0,1,'範馬刃牙')要素を削除する
変更のときと一緒でsplice()を使う。
書き方は<配列>.splice(<始まりのインデックス>, <削除する要素数>)
見ての通り複数の要素をまとめて削除できる。
ちなみに戻り値は削除した要素を含む配列で破壊的メソッドとして働く。
// リアクティブにデータを削除this.charas.splice(0,2)全削除したい
通常通り、arr.length = 0のイディオムを使いたくなるが、これだと配列の長さを変える操作なのでいけないみたい。
（一見、動いているようにみえるが、Vue作者もそう言っているので使うのはやめた方がよさそう）
// これは本当はダメthis.charas.length=0要素をまとめて削除できるsplice()を使う。第二引数に配列の長さを渡せば全削除できる。
// これで全削除できる。this.charas.splice(0,this.charas.length)// => []要素を全て入れ替えたい
配列を一度空にしてからまとめて追加すればよい
// 一旦、全削除して要素を入れ替えるthis.charas.splice(0,this.charas.length)this.charas.push(...['範馬刃牙','範馬勇次郎','列海王'])配列自体を削除したい
あまり使うケースは無さそうだが、要素ではなく配列自体を削除したい場合はどうするか？
この場合はオブジェクトと同じでnullを入れればよいみたい。
// charasを削除するthis.charas=null