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']

        };

    },

})