Documents

vue.jsで配列の追加・削除がリアクティブに反映しない問題


実際問題として問題でもバグでもなく設計の問題に尽きるのであるが、vue.jsはすぐに動かなくなる。ここではエラーで動かなくなるのではなくconsole.logではきちんと動いているのにv-forにリアクティブに反映されない、または、vue.js devtoolsなどの開発ツールで配列の要素を削除したり追加したり変更してもv-forなどのvueディレクティブに反映しないといった問題を扱います。つまるところ、エラーではないという扱いになっています。
vue.jsはJavascriptのラッパーでJavascript自体ではないので、使える関数がやや違います。viewに直接影響を与える(与えない)関数というのがいくつかって、vueで使える配列操作の変数は、

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

ということになっています。おそらく原因の殆どがこれで解決します。

data: {
  foo: [ 'a', 'b', 'c' ],
}

みたいな感じでベタで初期値を設定している場合に、この配列から要素を抜くときには、this.photo_images.splice(0, 1)が使えなくて、this.photo_images.shift(0)が使えるという謎。この場合は、上記の関数使ってるじゃん!という苦言を吐くしかないのです。なんでよ。
もうひとつは、変数を直接入れないってことですね。

this.foo[3] = 'd';

これだとリアクティブに動かなくなるわけです。ここは、

this.foo.push('d');

これじゃないとダメです。
Javascriptのいい加減さが、やや厳しくなった感じがしないでもないですが、vueの文法の方が正しいような気がしてきました。



2022.06.03