Exploring VUE for the first time, I am working on a project where I need to update an array by passing an object. The scenario involves two buttons named BUTTON 1 and BUTTON 2. Clicking on BUTTON 1 sets an object in the list[] using this.$set. However, when BUTTON 2 is clicked, it should update with a new value and display as:
{
a:1,
b:2,
c:3
}
Currently, I am using this.$set for button 2 as well, which replaces the previous value with the new one like {c:3} only. Is there a way in VUE to add on the value so that it displays {a:1, b:2, c:3} when BUTTON 2 is clicked?
View
<div id="app">
<button @click="button1()">Button 1</button>
<button @click="button2()">Button 2</button>
</div>
Method
new Vue({
el: "#app",
data: {
list:[]
},
methods: {
button1(){
var b = '0';
this.$set(this.list, b, {
1:{
a: '1',
b: '2'
}
})
console.log(this.list);
},
button2(){
var b = '0';
this.$set(this.list, b,{
1:{
c: '3'
}
})
console.log(this.list);
},
}
})
Above code can be accessed via the following jsfiddle link: