Vue.jsは気難しい(配列編)

  • 29
    Like
  • 5
    Comment

はじめに

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 リストレンダリング 配列の変化を検出