CODEWITHSUNDEEP
vue.js
user3612986
user3612986

Reputation: 325

Know when DOM element has changed in Vue.js

I am looking to figure out when a particular DOM element has been changed due to the vue data being updated.

So in the example below, I want to know when {person.favoriteColor} changes. person.favoriteColor is part of a dynamic list of people and at any point, that person can change their favorite color. The number of people can also change at any time. So for this need, I am really only looking to know when that particular person's favorite color has been updated.

<div v-for="person in people">
    <div>{{person.favoriteColor}}</div>
</div>

An idea of what I need:

<div v-for="(person, index) in people">
    <div v-on:update='thisHasBeenUpdated(index)'>{{person.favoriteColor}}</div>
</div>

Upvotes: 0

Views: 886

Answers (1)

jdlm
jdlm

Reputation: 6644

It sounds like you want to use watch:

watch: {
  'person.favoriteColor': {
    handler(value, oldValue) {
      console.log(`Favorite color changed from ${oldValue} to ${value}`);
    }
  }
}

Upvotes: 2

Related Questions