[Vuejs]-Why nested array dynamic update is not working in my case

by

2👍

✅

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>

Result img

Leave a comment