🤯

Vue.js の v-model は配列要素を渡してもリアクティブに更新されない?の真相

2022/11/26に公開

いまだに Vue.js 2 系で疲弊している者です。

Vue.js 2 系では配列要素を更新するのに Vue.set(this.items, 0, 1) のように書かないとリアクティブにならないという初見殺しの罠がある。したがって v-model で <input v-model="items[0]"> のように書いても、更新時に実行しているのは items[0] = $event だろうから当然リアクティブになるはずがないのは想像がつく。

実際にググってみても配列要素を添字付きで渡したら動かないという記事があり @change イベントから v-model に渡した配列を自力で更新する方法を紹介したりしていた。

だが、そんな罠や回避策をずっと気にかけていられるわけもなく普通に v-model に配列要素を渡すコードを書いてリリースしてしまった。その後、リファクタリングしているときに気づき、Vue.set を使う方法に直したが、そもそもどうして動いていたのかと不思議に感じて調べたところ、

<input v-model="items[0]"> はリアクティブになっていた。

それができて this.items[0] = 1 が依然ダメな理由はわからない。

Discussion