I'm facing an issue while trying to insert an object into an array using the Vue.set function. The problem is that it adds the item to a different object with the same array property. Here's a snippet of my code:
data() {
return {
...
form: {
...
client_a: {
...
items: []
},
client_b: {
...
items: []
},
}
};
},
When I execute the following code (adding an item to client_a.items):
this.$set(this.form.client_a.items, 'key', { prop1: '', prop2: '' })
Unexpectedly, client_b.items also gets updated with the same value as client_a's items:
console.log(this.form.client_b.items)
The output is:
[
'key': { prop1: '', prop2: '' }
]
Instead, the expected result for this.form.client_b.items should be an empty array, as nothing was added to it. Here is a link to the code example for reference: https://codesandbox.io/s/proud-fast-bjvyr