How to change color of button on deselection

I have a button which changes the color on selection , i want to make it back to default on deselection how do i do that. Pls help me out

You can bind your css with v-if, and show color css only when a situation satisfied, whici in your case its only pressed state I think

Hi Rajath,
I dont think rastek solution is correct. First, i dont know if you are using vue.
If you are using vue, v-if directive its not to bind clases, but to render or not components/elements. For that you can use de v-bind:class=’{‘my-class’: active}’.
But framework-7 has Dom7. wich make this simple, just use .toggle. To switch between classes

.toggleClass(className) Remove (if class is present) or add (if not) one or more classes from each element in the set of matched elements:

<!-- Before -->
<h1 class="small">This is first title</h1>
<h2>This is subtitle</h2>
$$('h1, h2').toggleClass('small');
<!-- After -->
<h1>This is first title</h1>
<h2 class="small">This is subtitle</h2>

https://framework7.io/docs/dom7.html#classes

1 Like

Actually you can do it , not the perfect solution maybe but there is no reason not to do with v-if

below code shows 2 lines with different css classes for same button and only show one of them according to some computed property

a.tab-link.b(href='#tab-7', @click='hold()')
  i.icon.material-icons.md-only(v-if="activeCall.state !== 'ON_HOLD'") phone_paused
  i.icon.material-icons.md-only.my-color(v-if="activeCall.state === 'ON_HOLD'") phone_paused

As i say. v-if is for render or not elements. in your solution you are rendering one elemet or the other. i dont think that is a good solution when you can use classes.

so if I want to use toggling, should I use v-bind or Dom7 ? you wrote Dom7 makes it simple

and another question, show I use statement activeCall.state !== ‘ON_HOLD’ directy with v-bind
or should I defined it in a computed property ?

Thank you guys for your help

pvtallulah solution was more apt for my code

thank you guys :smiley: