In vue, how do i display attribute of tag? (how does v-for work with html?) Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of In vue, how do i display attribute of tag? (how does v-for work with html?) without wasting too much if your time.

The question is published on by Tutorial Guruji team.

<ul>
    <span class="tabs"
         :class="{ activeTab: selectedTab === tab }"
          v-for="(tab, index) in tabs"
          @click="selectedTab = tab"
          :key="tab">
          {{ index+1 }}. {{ tab }}</span>
</ul>

.....

 data() {
      return {
        tabs: ['Reviews', 'Make a Review'],
        selectedTab: 'Reviews'
        
      }
    }
  })

I want to know value of “tab” before click ‘Reviews’ or ‘Make a Review’. so how do I display “tab”?

Answer

Move :class after v-for

<ul>
    <span class="tabs"
        v-for="(tab, index) in tabs"
        :class="{ activeTab: selected === tab }"
        @click="selectedTab = tab" 
        :key="tab">
        {{ index+1 }}. {{ tab }}</span>
</ul>
We are here to answer your question about In vue, how do i display attribute of tag? (how does v-for work with html?) - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji