Vue.jsで連想配列を動的に変更しようとした時に少しつまづいたので、備忘録として書きます。
やりたかったこと
storeから取得した情報を連想配列に入れてチェックボックスに紐付け、動的に値を変更したかった。
arrayTest.html
<div id="app">
<div v-for="i in flagArray">
<input type="checkbox" v-model="flagList[i]">
</div>
</div>
arrayTest.js
var app = new Vue({
el: '#app',
data: {
flagList: {}
},
computed: {
flagArray: {
return this.$store.getters.flags;
}
},
methods: {
setFlag: function () {
for (var i = 0; i < this.flagArray.length; i++) {
this.flagList[i] = this.flagArray[i]; ←ここで代入
}
}
}
})
ただ、これを実行してチェックボックスにチェックを入れても、Vue内部では値が変わってくれないという状態に陥っていました…
変更したところ
公式ドキュメントに載ってました。
よくある初心者の落とし穴
オブジェクトの変更検出の注意
結局のところ、直接代入はNGみたいで、下の$set()を使った方法に変更すれば、動的に値を変更してくれました。
arrayTest2.js
methods: {
setFlag: function () {
for (var i = 0; i < this.flagArray.length; i++) {
// this.$set(array, key, val);
this.$set(this.flagList, i, this.flagArray[i]); ←これに変更
}
}
}
結論
公式ドキュメントしっかりと読もう。
以上!