问题描述
我正在尝试使用 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()"