How do I change a buttons CSS class when clicked in vue?

Question

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>

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

.initial {
color: red;
}
<style>

Posted 13-Oct-18 8:08am

Member 14000074

Updated 13-Oct-18 21:40pm

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Mehdi Gholam · Answer 1 · 2018-10-13T20:51:00

Solution 1

Try the following:

HTML

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

Posted 13-Oct-18 20:51pm

Mehdi Gholam

Updated 14-Oct-18 1:45am

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.