I am trying to figure out how the this.$set (aka Vue.set) api works when using it to update an multidimensional array.
Given:
new Vue({
el: '#app',
data: {
rows:[{"id": "4", "edit": "true" }, { "id": "5", "edit": "false" }]
},
....
How will I use $this.set to do something like this:
this.rows[0].edit = false
I know this doesn't work:
this.$set(this.rows2, 0, false)
What is the correct way to use $this.set for a KV pair array ?
Since the edit properties in your rows objects are already set, you do not need to use Vue.set in this case. You can just set the property value and Vue will notice the change:
this.rows[0].edit = false;
Here's a simple example:
new Vue({
el: '#app',
data() {
return {
rows:[
{ "id": "4", "edit": true },
{ "id": "5", "edit": false }
],
}
},
methods: {
editNext() {
let index = this.rows.findIndex(r => r.edit);
this.rows[index].edit = false;
let next = ++index % this.rows.length;
this.rows[next].edit = true;
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<div v-for="(row, i) in rows" v-if="rows[i].edit">
Editing Row ID {{ row.id }}
</div>
<button @click="editNext">Edit Next</button>
</div>However, if the edit property of your row objects were not set initially (or if you just wanted to be safe), then you would need to use Vue.set in order to add the property and have it be reactive:
this.$set(this.rows[0], 'edit', false);
Here's an example of that case:
new Vue({
el: '#app',
data() {
return {
rows:[
{ "id": "4", "edit": true },
{ "id": "5" }
],
}
},
methods: {
editNext() {
let i = this.rows.findIndex(r => r.edit);
this.$set(this.rows[i], 'edit', false);
let next = ++i % this.rows.length;
this.$set(this.rows[next], 'edit', true);
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<div v-for="row in rows" v-if="row.edit">
Editing Row ID {{ row.id }}
</div>
<button @click="editNext">Edit Next</button>
</div>
