CODEWITHSUNDEEP
vue.jsvuetify.js
Giovanni Dubois
Giovanni Dubois

Reputation: 31

Vuetify.js: How do I change color of v-btn component when clicked

I would like to change the color of a button when clicked. I have two buttons. When one button is clicked, it assigns variable "host", when the other button is clicked, it assigns variable "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>

I've tried the following:

  1. colon shorthand
<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>

but neither works

  1. v-btn-toggle doesn't do the job and doesn't have the styles we want (which is a circle)

I'm a newby in vue.js and don't know how to debug this. Any help would be greatly appreciated!

Upvotes: 3

Views: 21587

Answers (2)

dganenco
dganenco

Reputation: 1616

I've prepared a simple fiddle for you. You should bind property color using v-bind:

<v-btn v-bind:color="type === 1 ? 'success' : 'error'">Success</v-btn>

Upvotes: 1

Aer0
Aer0

Reputation: 3907

Color is not a CSS property it's a property of v-btn itself so you can pass in any JS expression you want. The following should probably work.

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

Upvotes: 9

Related Questions