如何在 vuetify vue js 3 中使用三元运算符进行函数调用和按钮文本？

Question

我正在尝试让登录按钮在图标“loginIcon/logoutIcon”之间切换，工具提示在登录/注销之间切换，以及相应的功能 onclick 更改为登录/注销。

我可以通过 v-if 和 v-else 得到这个。但为了简单起见，我想使用三元运算符。但我没有得到预期的结果。

这是使用 v-if 和 v-else 的代码

<template>
  <v-btn v-if="isLoggedIn" @click="logout">
    <template v-slot>
      <v-img :src="logoutIcon"></v-img>
      <v-tooltip activator="parent" v-if="tooltipsEnabled" location="bottom"> Logout </v-tooltip>
    </template>
  </v-btn>
  <v-btn v-else @click="login" variant="tonal" class="rounded-xl" style="width: 70px">
    <template v-slot>
      <v-img :src="loginIcon" width="16"></v-img>
      <v-tooltip activator="parent" v-if="tooltipsEnabled" location="bottom"> Login </v-tooltip>
    </template>
  </v-btn>
</template>

这是我尝试使用三元运算符的代码

<template>
  <v-btn
    @click="isLoggedIn ? logout : login">
    <template v-slot>
      <v-img :src="isLoggedIn ? loginIcon : logoutIcon"></v-img>
      <v-tooltip activator="parent" v-if="tooltipsEnabled" location="bottom">
        isLoggedIn ? "Login" : "Logout"
      </v-tooltip>
    </template>
  </v-btn>
</template>

isLoggedIn 的值来自 store => const { isLoggedIn } = storeToRefs(useLoginStore()) 它在登录/注销功能中发生变化。

我没有看到所有这些的预期行为：登录/注销工具提示更改、登录/注销功能调用更改和图标更改。

这里出了什么问题？

Answer 1

你好像忘记调用它了，对于函数调用，它应该是：

<v-btn @click="isLoggedIn ? logout() : login()">

至于文字，需要将它们换行

{{}}

:

      <v-tooltip activator="parent" v-if="tooltipsEnabled" location="bottom">
        {{ isLoggedIn ? "Login" : "Logout" }}
      </v-tooltip>