1

referring to this link, and as i peruse and inspect the code posted below,attracted my attention the

v-for="(_, tab) in tabs"

as shown in the code below.

i would like to know what does _ mean as first parameter in a for-loop please

code:

<script setup>
import Home from './Home.vue'
import Posts from './Posts.vue'
import Archive from './Archive.vue'
import { ref } from 'vue'
 
const currentTab = ref('Posts')

const tabs = {
  Home,
  Posts,
  Archive
}
</script>

<template>
  <div class="demo">
    <button
       v-for="(_, tab) in tabs"
       :key="tab"
       :class="['tab-button', { active: currentTab === tab }]"
       @click="currentTab = tab"
     >
      {{ tab }}
    </button>
      <component :is="tabs[currentTab]" class="tab"></component>
  </div>
</template>
Amrmsmb
  • 1
  • 27
  • 104
  • 226

1 Answers1

2

It's just convention for an unused variable.

What you're really using is Vue's v-for with an Object

v-for="(value, key) in collection"

But in your implementation:

  • collection -> tabs
  • value -> _
  • key -> tab

If it helps you understand it better, consider this

<button
  v-for="tabName in Object.keys(tabs)"
  :key="tabName"
  :class="['tab-button', { active: currentTab === tabName }]"
  @click="currentTab = tabName"
>
  {{ tabName }}
</button>
Phil
  • 157,677
  • 23
  • 242
  • 245
  • so, for `Home, Posts, Archive`, they are keys not values, right? – Amrmsmb Jun 16 '23 at 05:22
  • 1
    Yes, `tabs` is an object with keys `Home`, `Posts` and `Archive`. Each value is the corresponding component – Phil Jun 16 '23 at 05:25
  • i am new vue, and i want to know please what is the official doc for ui of vue?i mean, i used to program in angular and for the ui of angular i refer to clarity-design web-site, it contains all the possible ui e.g:navigation drawer,buttons,input,tabs and others.what is the equivalent of clarity-design for vue please...should i create a question for that? – Amrmsmb Jun 16 '23 at 05:45
  • There is no official UI as far as I know. Choose [whatever you want](https://vue-community.org/guide/ecosystem/ui-libraries.html) but no, that would _not_ be on-topic for Stack Overflow – Phil Jun 16 '23 at 05:47
  • thanks, but in the link you provided, i cant see or find any API for the UIs?!! – Amrmsmb Jun 16 '23 at 05:52