CODEWITHSUNDEEP
vuetify.js
Boidurja Talukdar
Boidurja Talukdar

Reputation: 696

How do I change the background color of v-btn on click inside v-bottom-nav

I want to change the background color of a v-btn to black while the button is clicked inside a v-bottom-nav.

I have already tried but it's not working

<v-btn
    :color="changeBackgroundColor ? 'secondary' : 'info'"
    @click="changeBackgroundColor = !changeBackgroundColor"
>

I have the code in https://codepen.io/boidurja-talukdar/pen/ZddywR?editors=1010

I expect the background color of button 'A' to toggle from blue to black on click. But the actual result is that the text on button 'A' just disappears on click.

Upvotes: 1

Views: 13831

Answers (1)

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

You can do it with style binding ... check this fork codepen

   <v-btn
       @click="changeBackgroundColor = !changeBackgroundColor"
       :style="{
           backgroundColor : changeBackgroundColor ? 'black !important' : '',
           color: changeBackgroundColor ? 'white !important' : 'black'
           }"
   >

Upvotes: 2

Related Questions