Vue: использование переходов Vue с v-if / else?

Question

У меня есть компоненты, структурированные следующим образом:

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

Я хотел бы обернуть переход вокруг каждого из них. Мой единственный вариант - явно отказаться отv-else и проверка "v-if="!this.showData" нравиться:

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

или есть другой способ сохранить свой v-if/else - мне он кажется чище.

Answer 1

Вы можете сделать if/else на переходном компоненте

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

или переместите компоненты при переходе

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

Answer 2

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

на самом деле тебе не нужно звонить this в шаблоне html.

v-if="this.showData"

может быть так:

v-if="showData"