My goal is to set the active class on the first <li> tab by default, and then switch it to the second <li> tab when selected. I plan to use CSS to visually indicate which tab is currently active.
If you would like to see the current output, check out my JS Fiddle.
I would appreciate any assistance with this as I seem to be 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']
};
},
})