[Vuejs]-Vue: Using Vue Transitions with v-if/else?

by

2👍

✅

You can either make if/else on transition component

<transition name="fade" v-if="this.showData">
  <component-1></component-1>
</transition>
    
<transition name="fade" v-else>
  <component-2></component-1>
</transition>

or move your components under transition

<transition name="fade">
  <component-1 v-if="this.showData"></component-1>
  <component-2 v-else></component-1>
</transition>
👤CraftyMousy

1👍

<transition name="fade">
  <component-1 v-if="this.showData" />
  <component-2 v-else />
</transition>

actually you no need to call this in template html.

v-if="this.showData"

can be like this:

v-if="showData"

👤Fatur

Leave a comment