CODEWITHSUNDEEP
vuejs2
CodeFinity
CodeFinity

Reputation: 1350

How to check what data triggered updated in Vue?

updated: function() {
    console.log("updated");
    this.$emit("render-vue", this.$el.offsetHeight);
  },

This works fine enough...but in my app, props get updated (which I don't care about), and then there is a fetch() that updates data, resulting in additional DOM rendering.

So, that means that I get 2 'updated' events in succession! 👎🏾

Essentially, I only want updated to perform the $emit when data has been fully updated and the DOM is finished.

Currently, $emit is happening 2 times in succession, and that's not helping situation - IT DOM gets updated with props and then right after that another updated occurs when data gets updated after fetch().

Now, I could watch - tried that. The issue there is that $emit will fire off before all DOM is updated, sending the wrong info as argument.

It's almost like I need to watch a specific piece of data...and then, and only then, have updated send the $emit. 😖

For additional context, there are no children - this is a child component.

I can probably get this to work by using a setTimeout()...but come, on! That's sloppy! 👎🏾

Upvotes: 0

Views: 1188

Answers (1)

Stephen Thomas
Stephen Thomas

Reputation: 14053

In the code block that fetches the data, set a property to indicate new data is available

fetch(url)
    .then(() => {
        // whatever you're doing with the data
        this.newData = true;
    });

Check this state variable in the updated hook

updated() {
    if (this.newData) {
        this.$emit("render-vue", this.$el.offsetHeight);
        this.newData = false;
    }
}

Upvotes: 1

Related Questions