我正在尝试让登录按钮在图标“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()) 它在登录/注销功能中发生变化。
我没有看到所有这些的预期行为:登录/注销工具提示更改、登录/注销功能调用更改和图标更改。
这里出了什么问题?
你好像忘记调用它了,对于函数调用,它应该是:
<v-btn @click="isLoggedIn ? logout() : login()">
至于文字,需要将它们换行
{{}}
:
<v-tooltip activator="parent" v-if="tooltipsEnabled" location="bottom">
{{ isLoggedIn ? "Login" : "Logout" }}
</v-tooltip>