What's preventing the dynamic update of nested arrays in my specific situation?

Question

What's preventing the dynamic update of nested arrays in my specific situation?

Hello, I seem to be having an issue with updating a nested array dynamically. You can see the problem illustrated in the image below:

https://i.sstatic.net/IgkJ9.png

Below are the steps to reproduce the problem:

Click on the Add Likes button to add likes for example New Apple
By default, my like is set to Mango
Click on the Add about button to add the next row (Mango does not appear), then click on Add Likes to observe the issue.

To enhance code readability, I have placed helper functions in a mixin file named mixin.js

Expectation: I should be able to add any number of Add about and Add Likes (with the default value being Mango)

Here is my code snippet: https://codesandbox.io/s/musing-hawking-di4d3?file=/src/App.vue

javascript arrays vue.js

Answer 1

Answer №1

Initially, there is no need for a nested array for the tags property. Instead, use:

getLikesTemplate() {
  let year = this.year;
  let template = {
    id: this.getUniqueId(),
    like: `I'm ${year} Old and like things like`,
    tags: [this.getTagsTemplate("Mango")]          //removed nesting
  };
  this.year++;
  return template;
}

Additionally, in JavaScript, objects are passed by reference, allowing you to do this:

method:

addLikes(like) {                                   //extra code removed
  like.tags.push(this.getTagsTemplate("New Apple"));
},

template:

... 
<div style="text-align: left; display: flex">
  <div>                               //nested structure removed
    <div class="tags" v-for="tag in like.tags" :key="tag.id">    
      {{ tag.name }}
    </div>
  </div>                              //object reference passed
  <button style="margin-left: 20px" @click="addLikes(like)">
    Add Likes
  </button>
</div>

Image of result

Answer 2

Initially, there is no need for a nested array for the tags property. Instead, use:

getLikesTemplate() {
  let year = this.year;
  let template = {
    id: this.getUniqueId(),
    like: `I'm ${year} Old and like things like`,
    tags: [this.getTagsTemplate("Mango")]          //removed nesting
  };
  this.year++;
  return template;
}

Additionally, in JavaScript, objects are passed by reference, allowing you to do this:

method:

addLikes(like) {                                   //extra code removed
  like.tags.push(this.getTagsTemplate("New Apple"));
},

template:

... 
<div style="text-align: left; display: flex">
  <div>                               //nested structure removed
    <div class="tags" v-for="tag in like.tags" :key="tag.id">    
      {{ tag.name }}
    </div>
  </div>                              //object reference passed
  <button style="margin-left: 20px" @click="addLikes(like)">
    Add Likes
  </button>
</div>

Image of result

What's preventing the dynamic update of nested arrays in my specific situation?

Answer №1

Similar questions

Seamlessly adaptive HTML5 video playback

Can we streamline this jQuery code by utilizing .hasClass and .bind?

Vue: Implementing Data Refresh in Store Post-Login

The issue related to a form control named 'No value accessor' lacking an accessor

Starting a segment of an array in Java

Working with streams in Node.js by utilizing piping with both AJAX and the HTTP module

Missing out on the opportunity to operate on a GET request

Encountering a JavaScript toJSON custom method causing a StackOverflow error

What causes a component to not update when it is connected to an Array using v-model?

Tips for implementing the onload function in Rails view

Ways to display tinyMCE content in a unique manner

What is the best way to append items onto my 2D ArrayList?

Is it possible to include ternary in the "homepage" section of the package.json file?

I created a new game where I can select two images to display, but for some reason, it is only showing one

What is the best way to tally values or obtain a summary in an array iteration?

Issue with ng-show not toggling visibility on ng-click event in AngularJS

Adjusting the size and style of the <textarea > dynamically

fuel ux checkbox mark all

Set Sprite Canvas Material to match the color of a different element

Accessing Elasticsearch from Kibana without the need for authentication and sending requests freely