Click here to Skip to main content
13,736,491 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 8:08am
Updated 5 days ago
Comments
Richard Deeming 3 days ago
   
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
5 days ago
   
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 5 days ago
   
Sorry, my mistake copy pasting, I've updated the answer.
5 days ago
   
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 5 days ago
   
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
Web05-2016 | 2.8.180920.1 | 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