0
166
ViewsWhy nested array dynamic update is not working in my case
Hi i have a problem with nested array dynamic update as shown in below image
Here is a steps to re-produce the problem
- click on
Add Likesbutton it will add likes for egNew Apple - my default like is
Mango - click on
Add aboutbutton it will add next row (Mango is not appeared) click onAdd Likesto see the problem.
For reducing code readability i have put helper function into a mixin file called mixin.js
Expectation: i can add any number of Add about and Add Likes(with default value Mango)
Here is my code: https://codesandbox.io/s/musing-hawking-di4d3?file=/src/App.vue
·
Juan Pablo Isaza
1 answers
Answer question0
First, you don't need a nested array for the tags property. Use:
getLikesTemplate() {
let year = this.year;
let template = {
id: this.getUniqueId(),
like: `I'm ${year} Old and like things like`,
tags: [this.getTagsTemplate("Mango")] //nesting removed
};
this.year++;
return template;
}
Secondly, in JS objects are passed by reference, so you can do this:
method:
addLikes(like) { //removed the extra code
like.tags.push(this.getTagsTemplate("New Apple"));
},
template:
...
<div style="text-align: left; display: flex">
<div> //nesting removed
<div class="tags" v-for="tag in like.tags" :key="tag.id">
{{ tag.name }}
</div>
</div> //passing the reference to the object
<button style="margin-left: 20px" @click="addLikes(like)">
Add Likes
</button>
</div>
·
Juan Pablo Isaza
Report
Answer question