Execute every time a component is shown.

I know about the mounted and updated events, but what i'm looking for is how to run some code each time a component is SHOWN.

mounted happens when the component is first loaded, and updated happens when it's data is updated (too often).

I want to use it to refresh state data from my API.

Thanks for any suggestions.

jplhomer

8 years ago

Level 6

What is your current setup? Are you using Vue Router, where mounted won't fire every time it switches between component contexts?

Otherwise, mounted will generally do the trick each time the component is mounted or "displayed" - unless you have the component cached in place.

Another option is to add a watcher for some key value. For example, if you're using activeComponent in a parent container, you might be able to watch that:

watch: {
  activeComponent() {
    this.refreshData(); // or whatever you need to do
  }
}

A third option might be to add an event listener on whatever parent element is triggering this component to be "viewed" - a button click or otherwise.

Good luck!

Please or to participate in this conversation.