How do I toggle a class to show which tab is active in VueJS?

javascript vue.js vuejs2 v-for
Al-76 picture Al-76 · Apr 22, 2019 · Viewed 7.5k times · Source

I have created two tabs, which I would like the class of active set on the first <li> by default.

Then, when the second tab is selected, the .active class should pass to the second <li> and be removed from the first.

I can use CSS to create some style rules in order to give a visual indicator as to which tab is currently active.

I have also created a JS Fiddle to see the current output.

Any help welcome as I am rather stuck.

<ul class="overlay-panel-actions-primary">
    <li v-for="(tab, index) in tabs" @click="currentTab = index">{{tab}}</li>
</ul>
<div class="content-bd">
    <div class="tab-content">
        <div v-show="currentTab === 0">
            List of filters options
        </div>
        <div v-show="currentTab === 1">
            List of sort options
        </div>
    </div>
</div>

new Vue({
  el: "#app",
    data() {
        return {
            currentTab: 0,
            tabs: ['Filter', 'Sort']
        };
    },
})

Answer

arora picture arora · Apr 22, 2019

Use this -

:class="{active: currentTab === index}"

<li v-for="(tab, index) in tabs" @click="currentTab = index" :class="{active: currentTab === index}">{{tab}}</li>

Let me know if it works.

Fiddle - https://jsfiddle.net/so3mf8h9/

Update

You can also use ternary operator, It should also work.

:class="currentTab === index ? 'active' : ''"

Related questions

Vue Js - Loop via v-for X times (in a range)

How can I repeat a loop via v-for X (e.g. 10) times? // want to repeat this (e.g.) 10 times <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.price }} </li> </ul> …

Read More
Vue.js v-for loop from an object key and nested array

I have quiet a complex v-for loop inside another v-for. Basically displays a list of questions and a list of answers for that question. I plan on getting the key for the question and using that for the key for …

Read More
Vue.js - Use filter inside v-for

I have a simple Vue filter that limits the length of an array to n elements. It works fine used like this: {{ array | limitArray(2) }} Now I'd like to use it inside a v-for loop, like this: <li v-for="item …

Read More