CODEWITHSUNDEEP
vue.jstabshighlight
Quantum
Quantum

Reputation: 288

VueJs - Highlighting the active tab and highlighting the first tab after page load

I usually follow certain style to highlight the tab, and I have always been able to do it, but thought of doing it in a different way this time. Here is the way i have tried:

TabPage.vue

**template**

 <div class="tab" @click.prevent>
 <ul>
    <li>
       <a class="is-active" @click="makeActive($event, 'Wire')" :class="{ active: isActive }">Wire</a>
    </li>
    <li>
       <a class="Connection" @click="makeActive($event, 'Connection')" :class="{ active: isActive }">Connection</a>
    </li> 
</ul>
</div>

... 

<div v-if="this.tabAct == 'Wire'>
  ...
</div>
 
**script**
 
  data(){
   ...
   tabAct: 'Wire' ,
   isActive: false,
   ...
   methods: {
     makeActive(event, item){
       this.tabAct = item
     }
   
    **style**
    
     .isActive{
       background-color: red;
       color: brown; 
      }

Here i am unable to highlight active tab, please let me know how to highlight the active tab and i want to know what mistakes that i am making in my code, please i request you to send the changes.

Upvotes: 0

Views: 1509

Answers (1)

Celdus
Celdus

Reputation: 2100

You are setting the "active"-class based on the evaluation of the following code, so it should be for the first:

:class="{ active: tabAct == 'Wire'}"

and for the second:

:class="{ active: tabAct == 'Connection'}"

The documentation for this can be found here: https://v2.vuejs.org/v2/guide/class-and-style.html

Upvotes: 1

Related Questions