Vue 3 Vuetify中如何用三元运算符实现登录按钮切换功能？

你的三元写法存在三处关键错误，导致切换功能完全失效，具体问题及修复方案如下：

1. 图标资源的判断逻辑颠倒 #

原v-if代码中，isLoggedIn为真时显示logoutIcon，但你用三元写成了isLoggedIn ? loginIcon : logoutIcon，逻辑完全相反，导致图标切换方向错误。

2. Tooltip文本未使用Vue插值语法 #

你直接把三元表达式写在了标签内容里，Vue会将这段代码当作纯文本显示，不会解析执行。必须用{{ }}包裹表达式才能生效，同时这里的文本逻辑也搞反了——isLoggedIn为真时应该显示"Logout"而非"Login"。

3. 丢失未登录状态下按钮的专属属性 #

原v-else分支的按钮有variant="tonal"、class="rounded-xl"、style="width:70px"这些属性，你合并成单个按钮后未保留这些状态差异，会导致按钮样式不符合预期。

修复后的完整代码 #

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

补充说明：由于isLoggedIn是通过storeToRefs获取的响应式ref对象，Vue模板会自动为其解包，因此直接使用isLoggedIn即可，无需添加.value。

内容的提问来源于stack exchange，提问作者Divya Bharathi