Click here to Skip to main content
13,863,099 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>

.is-active {
  color: blue

.initial {
color: red;
Updated 13-Oct-18 22: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

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

Solution 1

Try the following:
<button :class="activeTab === 1 ? 'is-active':'initial'" name="button">START</button>
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
Web04 | 2.8.190214.1 | Last Updated 14 Oct 2018
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

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