Vue.jsは気難しい（配列編）

本記事は Vue 2.2 時代（2017/03頃）に記載したものです。
最新のVueでは未検証です（たぶん通用すると思う）ご留意ください。

はじめに

Vue.jsは便利だ
インスタンス内のプロパティの変更を感知し、DOMに反映してくれる
（他のフレームワークも同様だろうけど）

だが、値はVueが認識できる形で変更しなければならない
値の変更をVueに気づいてもらうための、配列の変更のコツを紹介する

配列の気の遣い方

指定indexの値を変更したい

items 配列 index: 3 の 要素を "yeah!" に変更する例

× index直指定では認識できない

this.items[3] = "yeah!";

○ spliceを使おう

this.items.splice(3, 1, "yeah!");

配列の長さを変更したい

items 配列の長さを 5 に変更する例

× lengthの変更では認識できない

this.items.length = 5;

○ spliceを使おう

this.items.splice(5);

末尾に値を追加したい

items 配列の末尾に "whoop!" を追加する

○ push()を使おう

this.items.push("whoop!");

要素を削除したい

items 配列 index: 3 の 要素を削除する例

○ spliceを使おう

this.items.splice(3, 1);

おわりに

これまで .splice() という関数を使ったことが無かったので
メモ代わりに記載した

オブジェクト編も記載しました

公式ドキュメントも参照のこと
Vue.js リストレンダリング 配列の変化を検出