Vuetify.js：单击时如何更改 v-btn 组件的颜色

Question

我想在单击时更改按钮的颜色。我有两个按钮。当一个按钮被点击时，它分配变量“host”，当另一个按钮被点击时，它分配变量“guest”。

<v-btn color="primary" fab large
 @click="type='host'">
   <v-icon>home</v-icon><br/>Host
</v-btn>

<v-btn color="secondary" fab large
 @click="type='guest'">
   <v-icon>person</v-icon><br/>Request
</v-btn>

我尝试了以下方法：

1. 冒号速记

<v-btn v-bind:style="{ color: type==='host' ? 'secondary' : 'primary' }>
<v-icon>home</v-icon>
HOST
</v-btn>

AND

<v-btn v-bind:color="{ type==='guest' ? 'secondary' : 'primary' }>   
<v-icon>person</v-icon><br/>
Request
</v-btn>

但两者都不起作用

2. v-btn-toggle 没有完成工作并且没有我们想要的样式（这是一个圆圈）

我是 vue.js 的新手，不知道如何调试。任何帮助将不胜感激！

Answer 1

颜色不是 CSS 属性，它是它v-btn本身的属性，因此您可以传入任何您想要的 JS 表达式。以下应该可以工作。

<v-btn v-bind:color="type==='guest' ? 'secondary' : 'primary'>.