初めに
- ネストした配列、連想配列の更新を調べていたので、ここにやり方を残しておく。
結論
- 2階層にネストしていても考え方は1階層と同じ
- 親が配列で孫を更新するのはちょっとだけ書き方が面倒
1階層の配列、連想配列の更新
index.html
<html>
<body>
<div id="app">
<input v-model="inputArray" />
{{ array }}<br />
<input v-model="inputDict" />
{{ dict }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
input: { array: [], dict: {} }
},
computed: {
array() {
return this.input.array;
},
dict() {
return this.input.dict;
},
inputArray: {
get() {
return this.input.array[0];
},
set(value) {
// computed:arrayに変更伝わらない
// this.input.array[0] = value;
// computed:arrayに変更伝わる
this.input.array.splice(0, 1, value);
}
},
inputDict: {
get() {
return this.input.dict.key1;
},
set(value) {
// computed:dictに変更伝わらない
// this.input.dict.key1 = value;
// computed:dictに変更伝わる
this.input.dict = { ...this.input.dict, key1: value };
}
}
}
});
</script>
</html>
参考リンク
2階層にネストした配列、連想配列の更新
index.html
<html>
<body>
<div id="app">
<input v-model="inputArray" />
{{ array }}<br />
<input v-model="inputDict" />
{{ dict }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
input: { array: [{}], dict: { key1: [] } }
},
computed: {
array() {
return this.input.array;
},
dict() {
return this.input.dict;
},
inputArray: {
get() {
return this.input.array[0].key1;
},
set(value) {
// computed:arrayに変更伝わらない
// this.input.array[0] = { ...this.input.array[0], key1: value };
// this.input.array[0].key1 = value;
// computed:arrayに変更伝わる
this.input.array.splice(0, 1, {
...this.input.array[0],
key1: value
});
}
},
inputDict: {
get() {
return this.input.dict.key1[0];
},
set(value) {
// computed:dictに変更伝わらない
// this.input.dict.key1[0] = value;
// computed:dictに変更伝わる
this.input.dict.key1.splice(0, 1, value);
}
}
}
});
</script>
</html>