Vue: Using Vue Transitions with v-if/else?

Question

I have components structured like this:

   <component-1 
       v-if="this.showData"
    ></component-1>
    
    <component-2
       v-else
    ></compoment-2>

I would like to wrap a transition around each one. Is my only option explicitly dropping the v-else and checking "v-if="!this.showData" like:

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

or is there another way I can keep my v-if/else -- it just feels cleaner to me.

score 2 · Accepted Answer · answered Jul 30 '20 at 03:50

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>

answered Jul 30 '20 at 03:50

CraftyMousy

81
2

1

Don't forget to use key attributes if transitions are applying for the same tag names. Refer: [Vue 2 Transition not working](https://stackoverflow.com/a/58230103/8031025) – Varun Kumar Medam Jun 19 '21 at 21:57

Fatur · Answer 2 · 2020-08-02T19:34:07.573

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"

edited Aug 02 '20 at 19:34

answered Aug 02 '20 at 19:27

Fatur

141
9

there is never a need for `this` at all in the template? – timmyLtus Aug 03 '20 at 16:26
Ya. I never found `this` in template in vue doc. – Fatur Aug 05 '20 at 02:01

Vue: Using Vue Transitions with v-if/else?

2 Answers2