Click here to Skip to main content
13,795,046 members
Rate this:
 
Please Sign up or sign in to vote.
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>


<style>
.is-active {
  color: blue
}

.initial {
color: red;
}
<style>
Posted 13-Oct-18 9:08am
Updated 13-Oct-18 22:40pm
Comments
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

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Try the following:
<button :class="activeTab === 1 ? 'is-active':'initial'" name="button">START</button>
  Permalink  
v2
Comments
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)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web03 | 2.8.181207.3 | Last Updated 14 Oct 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100