Vue reactivity fails to detect newly added properties to an element within an array

Question

Vue reactivity fails to detect newly added properties to an element within an array

Can someone help me with an issue I'm having where a template element is not reacting to an added property of an array element? Here's the example:

<div v-for="user in users"
     v-bind:key="user.id"
     v-bind:name="user.name">
     {{user.name}}
     <div class="warn" v-if="user.hasWarning">Warning!</div>
</div>

I want to display a warning whenever hasWarning: true is added to user

data:() {
  users: [
    {id: 1, name: "Foo"}
  ]
},
methods:{
  showWarning: function(id) {
    users.forEach(user => {
      if (user.id == id) {
        user.hasWarning = true;
      }
    });
  }
}

Even though I can see hasWarning being added to the user from both the console and Vue developer tools after calling showWarning(id), it doesn't render

<div class class="warn" v-if="user.hasWarning"..

. It works fine if my user is set up as

{id: 1, name: "foo", hasWarning: false}

, so why isn't it working for the added property? Should I avoid this approach altogether?

javascript vue.js vue-reactivity

Answer 1

Answer №1

Make sure to utilize the this.$set method for adding new properties. For more details, refer to the documentation: https://v2.vuejs.org/v2/api/#vm-set

Here's a sample implementation:

<template>
  <div>
    <div v-for="user in users" v-bind:key="user.id" v-bind:name="user.name">
      {{ user.name }}
      <button @click="showWarning(user.id)">showWarning</button>
      <div class="warn" v-if="user.hasWarning">Warning!</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    users: [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }],
  }),
  methods: {
    showWarning(id) {
      let user = this.users.find(user => user.id == id);
      this.$set(user, 'hasWarning', true);
    },
  },
};
</script>

Answer 2

Make sure to utilize the this.$set method for adding new properties. For more details, refer to the documentation: https://v2.vuejs.org/v2/api/#vm-set

Here's a sample implementation:

<template>
  <div>
    <div v-for="user in users" v-bind:key="user.id" v-bind:name="user.name">
      {{ user.name }}
      <button @click="showWarning(user.id)">showWarning</button>
      <div class="warn" v-if="user.hasWarning">Warning!</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    users: [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }],
  }),
  methods: {
    showWarning(id) {
      let user = this.users.find(user => user.id == id);
      this.$set(user, 'hasWarning', true);
    },
  },
};
</script>

Vue reactivity fails to detect newly added properties to an element within an array

Answer №1

Similar questions

Following an AJAX request, jQuery.each() does not have access to the newly loaded CSS selectors

Errors found during compilation when running the npm start command

Retrieve the value associated with the data attribute of the chosen dropdown option

Struggling with React integration of AdminLTE3 sidebar treeview?

Error encountered in Nuxt.js when reloading page due to undefined data

Using Jquery to Retrieve the Attribute Value from an HTML Element

Utilize JQuery's .load() function to transmit JSON data to your Flask server

Using a function as an argument to handle the onClick event

Unable to locate the JSON file in the req.body after sending it through an HTTP post request

Eliminate repetitive elements from an array using a specific merging algorithm

TabPanel with Grid component causes Error: The server-rendered UI does not match the initial UI, resulting in failed hydration

Failure to trigger on change event

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

Revising HTML content when Angular array is modified

Having trouble installing sqlite3? Encounter an issue like this: "srcdatabase.cc(35): error C2248: 'Napi::Env::DefaultFini': cannot access private member declared in class 'Napi::Env'"?

The initial value set for the innerHTML property of a div element

How can JavaScript determine if this is a legitimate JS class?

Identical manipulator distinct infusion

Can AJAX be considered a backend tool for retrieving data from servers?

The Express server is failing to deliver a response to the client when using the fetch method