How can I refresh an HTML element when a value in a multi-dimensional array changes?

Question

How can I refresh an HTML element when a value in a multi-dimensional array changes?

I'm facing an issue with a v-btn component that gets its content from values deep inside a multi-dimensional array.

<div v-for="student in students"> 
    <v-btn disabled v-for="tag in student.tags">{{tag}}</v-btn>
</div>

In this case, tags is a sub-array. I'm trying to update the button whenever these values change, but I'm unsure of how to achieve this. I've attempted using Vue.set as shown below:

// "this.students" is an array, and "this.students[index].tags" is a sub-array.
// I increase the length of the sub-array.
this.students[index].tags.length++;

// Next, I insert a new value at the end of the sub-array.
Vue.set(this.students[index].tags, this.students[index].tags.length - 1, value)

Although I can see the values and the length of the sub-array, this.students[index].tags, changing when I print them to the console, the new button doesn't appear. Only after re-compiling the client-end does the new button show up.
Could someone guide me on how to re-render that button? Thanks in advance!

javascript vue.js

Answer 1

Answer №1

Vue.js only observes the properties of an object within one level deep, meaning it will not detect changes deeper than that. To work around this limitation, you can consider a few solutions:

Trigger a force update using this.$forceUpdate(); (https://v2.vuejs.org/v2/api/#vm-forceUpdate)

Use

this.$set(this.students[index], 'tags', this.students[index].tags.concat([value]));

to ensure Vue observes the changes in the 'tags' array

Implement a hash-map for managing students' tags efficiently

computed:
{
  studentTags()
  {
    const result = {};
    this.students.forEach(student =>
    {
      result[student.id] = student.tags;
    });
    return result;
  }
},
methods:
{
  addTag(studentId, tag)
  {
    this.studentTags[studentId].push(tag);
  }
}

Answer 2

Vue.js only observes the properties of an object within one level deep, meaning it will not detect changes deeper than that. To work around this limitation, you can consider a few solutions:

Trigger a force update using this.$forceUpdate(); (https://v2.vuejs.org/v2/api/#vm-forceUpdate)

Use

this.$set(this.students[index], 'tags', this.students[index].tags.concat([value]));

to ensure Vue observes the changes in the 'tags' array

Implement a hash-map for managing students' tags efficiently

computed:
{
  studentTags()
  {
    const result = {};
    this.students.forEach(student =>
    {
      result[student.id] = student.tags;
    });
    return result;
  }
},
methods:
{
  addTag(studentId, tag)
  {
    this.studentTags[studentId].push(tag);
  }
}

Answer 3

Answer №2

Utilizing Vue.set to push new data into an array or sub-array is unnecessary as it is automatically handled by vuejs. However, employing Set is recommended to reflect updates within a sub-array.

Consider the following example-

<template>
  <div id="app">
    <div v-for="(student, index) in students" :key="index">
     <button @click="addMoreTag(student.id)" style="background: green">
      Add more
     </button>
     <button
      v-for="(tag, tindex) in student.tags"
      :key="tindex + 't'"
      @click="updateTag(student.id, tag)"
     >
      {{ tag }}
     </button>
   </div></div></div>d;
<scriptt>
 export defaault {
 nname: "App",

   dat:a() {
     return {
      studennts: [
      {
       id: 1,
       name: "John",
       tags: ["one", "two"],
      },
      {
       id: 2,
       name: "Mira",
       tags: ["three", "five"],
      },
     ],
   };
  },

 mmethods: {
   addMoreTaag(id) {
    let index = this.students.finndIndex((item) => item.id === id);
    this.sstudents[index].tags.push("new");
   },

   updateTagg(student_id, tag) {
    let index = his.students.findIndex((item) => item.id === student_id);
    let taagIndex = this.students[index].tags.findIndex(
      (item) => item === tag
    );
    this.$set(this.students[index].tags, tagIndex, "updated");
   },
 },
};

I also published on codepen here - https://codesandbox.io/s/blissful-cdn-5kyt1c?file=/src/App.vue

Answer 4

Utilizing Vue.set to push new data into an array or sub-array is unnecessary as it is automatically handled by vuejs. However, employing Set is recommended to reflect updates within a sub-array.

Consider the following example-

<template>
  <div id="app">
    <div v-for="(student, index) in students" :key="index">
     <button @click="addMoreTag(student.id)" style="background: green">
      Add more
     </button>
     <button
      v-for="(tag, tindex) in student.tags"
      :key="tindex + 't'"
      @click="updateTag(student.id, tag)"
     >
      {{ tag }}
     </button>
   </div></div></div>d;
<scriptt>
 export defaault {
 nname: "App",

   dat:a() {
     return {
      studennts: [
      {
       id: 1,
       name: "John",
       tags: ["one", "two"],
      },
      {
       id: 2,
       name: "Mira",
       tags: ["three", "five"],
      },
     ],
   };
  },

 mmethods: {
   addMoreTaag(id) {
    let index = this.students.finndIndex((item) => item.id === id);
    this.sstudents[index].tags.push("new");
   },

   updateTagg(student_id, tag) {
    let index = his.students.findIndex((item) => item.id === student_id);
    let taagIndex = this.students[index].tags.findIndex(
      (item) => item === tag
    );
    this.$set(this.students[index].tags, tagIndex, "updated");
   },
 },
};

I also published on codepen here - https://codesandbox.io/s/blissful-cdn-5kyt1c?file=/src/App.vue

How can I refresh an HTML element when a value in a multi-dimensional array changes?

Answer №1

Answer №2

Similar questions

The preventDefault method is failing to prevent the default action when placed within a

Incorporating a new row in JQuery Datatable using an mdata array

When transferring files to the src/pages directory in Next.js, the custom _app and _document components are not recognized

Looking for a simple method to display a popover using conditional if/else statements?

Is there a way to use a single function to fill and calculate multiple input fields with PHP, Javascript, and

if the arguments for a javascript function are not provided

js expressive dynamic pattern matching

The presence of a default value within an Angular ControlValueAccessor triggers the dirty state due to

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Encountering difficulties with installing bootstrap-vue

Create a generic function that retrieves a specific property from an array of objects using the select method

Issue with bootstrap: the ID is not activating even when it is visible

Efficiently finding a group of substrings within a JavaScript string

Error encountered: The object 'Sys' is not defined in the Microsoft JScript runtime

Creating unique ID tags using AngularJS

How can I maintain the selected state of checkbox and radio button in ReactJS after page refresh?

Top strategy for monitoring a user's advancement in reading different text segments

Best practices for passing multiple values with keys in vue.js when constructing URLs

It is not possible to utilize a JavaScript function once the script has been loaded through

Unable to display api results in React using console.log