How do I toggle the classes of individual
elements?

Question

When I toggle my variable active in the code below, the active CSS class is applied/removed from all elements in the list. How do I target the list elements individually? The Todo-List example has similar functionality (with todo / todo completed), but it's a bit beyond my skill set.

<ul>
    <li v-bind:class="{ active: active }" v-on:click="toggleActive">Test 1</li>
    <li v-bind:class="{ active: active }" v-on:click="toggleActive">Test 2</li>
    <li v-bind:class="{ active: active }" v-on:click="toggleActive">Test 3</li>
</ul>

toggleActive: function() {
    this.active = !this.active;
}

We'd need more details than this to provide the best answer. What makes something "active"? — Bill Criswell, Nov 21 '16 at 21:45
to keep the example simple, let's say that it was clicking on the text, I've updated my example to reflect this. — Pyreal, Nov 21 '16 at 21:53
Since there's no way to really calculate with data what's "active" you might need to use pure DOM manipulation. If those links were in a loop you'd be able to tie active state to the index of the element at least. You might actually want a little more to make this example simple. — Bill Criswell, Nov 21 '16 at 21:56

score 5 · Accepted Answer · edited Mar 25 '19 at 20:14

5

One way to do it is to store each state inside an item object. So you would need to create an array of items, and each item would have the structure:

{ 
    text: "item #"
    active: true
}

Note I'm passing the item reference when calling the toggleActive method.

<li v-for="item in items" 
    v-bind:class="{ active: item.active }" 
    v-on:click="toggleActive(item)">
    {{ item.text }}
</li>

toggleActive: function(item) {
    item.active = !item.active;
    console.log(item);
}

Here a working example: https://jsfiddle.net/pkwroL5L/1/

Hope it help!

edited Mar 25 '19 at 20:14

MarredCheese

17,541
8
92
91

answered Nov 22 '16 at 08:57

Italo Ayres

2,603
2
16
20

This is what i'm looking for, How would I go about passing an array of existing data into this? just edit the populate function? – Pyreal Nov 22 '16 at 16:58
1

Yes, that would work .If you are working with fixed data you can define directly on the `data: {...}` object. But If your items come from a server or are created dynamically you should use [computed properties](https://vuejs.org/v2/guide/computed.html) or populate them inside a method. – Italo Ayres Nov 22 '16 at 18:02
I'm trying to work this out. the data comes in dynmaically from user input to textareas. right now they are being stored into an array. It looks like I need to change that to an object for it to work properly with your method. – Pyreal Nov 22 '16 at 19:07
1

Indeed. This can be easily done with something like this: `[1, 2, 3].map(function(i) { return { item: i, active: true} })`. It will create an array of objects. (Just press F12 and paste it on the chrome console to see the result) – Italo Ayres Nov 22 '16 at 19:21
Still having some issues. I've edited your jsfiddle to give a better idea of what i'm trying to accomplish. Maybe you can spot what i'm missing. https://jsfiddle.net/1q9uenuw/2/ – Pyreal Nov 22 '16 at 20:17
1

I've changed a little you combine function to create an object before inserting it onto the array. [Check it out](https://jsfiddle.net/1q9uenuw/6/). Just a tip: You may want to consider reading a bit about pure JS, it will make learning frameworks a lot easier! Cheers. – Italo Ayres Nov 22 '16 at 21:41
I appreciate the help, been trying to figure this out for 2 days. I should be able to use .split() to make each array element it's on
while retaining the object correct? I made sure to work with just vanilla HTML, CSS, and Javascript for a while before I jumped into Vue.js but I do have some weak areas I need to go over.

Pyreal

Nov 22 '16 at 21:49

1

Finally got it to work, I'd like to thank you again for the help. https://jsfiddle.net/ddsrucdd/3/ – Pyreal Nov 23 '16 at 17:55

What if we now want just one li active at any given time. So there is only one li with active class, the most recently clicked one. Past active classes are reverted back to their normal class? – Akin Hwan Feb 20 '18 at 16:01

score 1 · Answer 2 · answered Apr 03 '21 at 10:36

If you want to toggle the clasess of individual elements programattically by VueJS

VueJS allows you to bind the class of the anchor tag (e.g) directly to the index of the li element so that when the vuejs variable bound to the index changes, the class also changes. Check these two links for more details

This is the crux of the solution

:class="{current:i == current}

available on the fiddle below and another post that explains in blog format how anchor class can be dynamically controlled in vuejs

https://jsfiddle.net/Herteby/kpkcfcdw/

https://stackoverblow.wordpress.com/2021/04/03/how-modern-javascript-makes-click-simulation/

How do I toggle the classes of individual
elements?

2 Answers2

Linked

How do I toggle the classes of individual elements?

2 Answers2

Linked

How do I toggle the classes of individual
elements?