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']
        };
    },
})

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']
        };
    },
})

• javascript
• vue.js
• vuejs2
• v-for

• You can use the .exact-active-class class in your styles, no need to do anything in your JS or JSX – Alicia Sykes Commented Apr 22, 2019 at 12:05

2 Answers 2

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' : ''"

Edit: Ah, sorry I thought you were using vue-router. When your site gets bigger, it may be an idea to start using router, and when you do, this method will work for you