How to update HTML element class after it's clicked in VueJS?

Question

I'm using VueJS 2.3.0, and now I need to update HTML element's class after it's clicked.

I have this template code:

<template id="model-template">
    <span>
        <button v-on:click="activate" >{{ model.fu }} month</button>
    </span>
</template>

I just checked the VueJS official documentation about :class solution, but I'm confused...

If I use jQuery, then I code this to do what I want to do:

$('button').each(function() {
    $(this).click(function() {
        $('button').removeClass('clicked');
        $(this).addClass('clicked');
    });
});

UPDATE: this is find all buttons, remove 'clicked' class from each button elements, and add 'clicked' class to only that one what the user is clicked.

How can I do same thing in VueJS?

You want to remove the clicked class from all other buttons in your component and then add it to the button that was clicked? — Bert
– Bert, Commented Jun 18, 2017 at 15:40

Riaz Laskar · Accepted Answer · 2017-06-18 11:41:43Z

1

activeClass is a property in your vue instance.The below syntax means the presence of the active class will be determined by the truthiness of the data property activeClass. i.e if activeClass = true then class active will be added and if activeClass = false it will be removed from the button.

<template id="model-template">
    <span>
        <button v-bind:class="{active : activeClass}" >{{ model.fu }} month</button>
    </span>
</template>

Once you understand and implement it will be even more simple then jquery.

jsfiddle if you want to see it in action: https://jsfiddle.net/riazxrazor/5jfnwav4/4/

edited Jun 18, 2017 at 11:41

answered Jun 18, 2017 at 11:22

Riaz Laskar

1,3229 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

netdjw Over a year ago

Looking good, but this solution set true / false only that one copy of button element. I want to set all of buttons to false, and only that one true what the user clicked.

Riaz Laskar Over a year ago

i wasn't able to achieve in a simple way had to hack a little but i managed to do it, u can have a look. jsfiddle.net/riazxrazor/5jfnwav4/7

Collectives™ on Stack Overflow

How to update HTML element class after it's clicked in VueJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related