Click here to Skip to main content
15,940,921 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
On click the button keeps the initial class not the is-active class. Any ideas?

What I have tried:

<button class="initial" :class="{'is-active': activeTab === 1}" name="button">START</button>

.is-active {
  color: blue

.initial {
color: red;
Updated 13-Oct-18 21:40pm
Richard Deeming 16-Oct-18 12:06pm    
NB: CSS rules with the same specificity are applied in the order in which they are declared. Since .initial is declared after .is-active, its properties override any equivalent properties in the earlier rule.

The only property in both rules is color, so an element with both classes applied will be indistinguishable from an element with just the initial class applied.

1 solution

Try the following:
<button :class="activeTab === 1 ? 'is-active':'initial'" name="button">START</button>
Share this answer
Member 14000074 14-Oct-18 7:25am    
Hi, I'm getting the following error: invalid expression: Unexpected token === in

{activeTab === 1 ? 'is-active':'initial'}

Raw expression: :class="{activeTab === 1 ? 'is-active':'initial'}" from: <button :class="{activeTab === 1 ? 'is-active':'initial'}" @click="setActiveTab" name="button">START
Mehdi Gholam 14-Oct-18 7:46am    
Sorry, my mistake copy pasting, I've updated the answer.
Member 14000074 14-Oct-18 7:51am    
Thanks, thats working. Is there a way to have multiple buttons which go to is-active when clicked on, but only one button can be is-active at any one time?
Mehdi Gholam 14-Oct-18 8:21am    
Your question is a contradiction unless you have 2 "is-active" classes.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900