Edited at

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

More than 1 year has passed since last update.

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