Having mounted() only run once on a component Vue.js

Asked By: Anonymous

I have two components that conditionally render with v-if:

<Element v-if="this.mode === 'mode'"/>
<OtherElement v-if="this.mode !== 'mode'"/>

I have load-in animations for both components that I have under mounted(), that I only want to run the first time they are loaded. But with mounted, each time the component is recreated when this.mode changes, the animations trigger again. How can I avoid this?

Solution

Answered By: Anonymous

You could wrap your components within a keep-alive element ..

<keep-alive>
    <Element v-if="this.mode === 'mode'"/>
    <OtherElement v-else />
</keep-alive>