How to check what data triggered updated in Vue?

Question

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! 👎🏾

Actually, this is a poor question, and as it turns out the issue I was experiencing was not related to this question. 😳 — CodeFinity
– CodeFinity, Commented Dec 1, 2018 at 13:02
Not really. Up to community to remove or not. I m good with it, and answer below is also good. — CodeFinity
– CodeFinity, Commented Dec 2, 2018 at 19:37

Stephen Thomas · Accepted Answer · 2018-11-30 20:29:37Z

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; } }

Collectives™ on Stack Overflow

How to check what data triggered updated in Vue?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related