如何在 vuejs 中使用 javascript 在转换中使用三元运算符？

如何解决如何在 vuejs 中使用 javascript 在转换中使用三元运算符？

我正在尝试使用 vuejs 和 gsap 在 h2 之间实现一个非常基本的幻灯片。根据方向（下一张和上一张幻灯片），我需要 2 种不同类型的过渡。为了获得紧凑的代码，我使用了三元运算符 ?:

   <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>

如果我使用带有 v-if / v-else 语法的 2 div，它运行良好。我在这里做错了什么？我需要以不同的方式格式化三元返回的内容吗？

解决方法

@enter 是一个事件处理程序。您可以在此处传递函数名称，例如 @enter="enterNext"（这可能是您之前所做的）或有效的 JS 代码片段，例如 @enter="enterNext($event)"（函数调用）

您的三元不返回任何内容，因为它缺少 return 语句。

无论如何，您可能想要的是：@enter="direction ? enterNext() : enterPrev()"