How to use ternary operator in transition using javascript in vuejs?

Question

I'm trying to achieve a very basic slide between h2, using vuejs and gsap. I need 2 different types of transitions, based on the direction (next and previous slide). To obtain a compact code, I used the ternary operator ?:

   <transition :css="false" @enter="direction ? enterNext : enterPrev">
     <h2 :key="currentPage.id">
       <NuxtLink
         :to="currentPage.to"
         :title="currentPage.longTitle"
         exact-active-class="is-active"
       >
         {{ currentPage.title }}
       </NuxtLink>
     </h2>
   </transition>

If I use 2 div with a v-if / v-else syntax, it works well. What am I doing wrong here ? Do I need to format differently what the ternary returns ?

Answer 1

@enter is an event handler. You can pass a function name here like @enter="enterNext" (that's what you probably did before) or valid JS code fragment like @enter="enterNext($event)" (function call)

Your ternary doesn't return anything as it is missing return statement.

Anyway what you probably want is this: @enter="direction ? enterNext() : enterPrev()"