Issue rendering component using v-for

[mecanicoweb]

Hi community! I’m a beginner on Quasar, I’m working on a To-Do App according to the Danny’s Tutorial on Youtube, I created a component based on tabs for navigation purpose.

Here’s the thing, the component only render one item, it seems like it doesn’t go throght the loop v-for.

This is my code:

FooterTabs.vue (Component):

<template>
  <q-footer elevated>
    <q-tabs>
    <q-route-tab
      :icon="icon"
      :to="to"
      :label="label" />
    </q-tabs>
  </q-footer>
</template>

<script>
export default {
  name: 'FooterTabs',
  props: {
    icon: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    to: {
      type: String,
      default: '#'
    }
  }
}
</script>

<style>

</style>

Layout.vue:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          Quasar Todo List App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header>
    <FooterTabs
      v-for="link in essentialLinks"
      :key="link.label"
      v-bind="link"
    />
    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Navigation
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.label"
          v-bind="link"
        />
      </q-list>
    </q-drawer>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'components/EssentialLink'
import FooterTabs from 'components/FooterTabs'

export default {
  name: 'Layout',

  components: {
    EssentialLink,
    FooterTabs
  },

  data () {
    return {
      leftDrawerOpen: false,
      essentialLinks: [
        {
          label: 'To Do',
          icon: 'list',
          to: '/'
        },
        {
          label: 'Settings',
          icon: 'settings',
          to: '/settings'
        }
      ]
    }
  }
}
</script>

PageTodo.vue:

<template>
  <q-page padding>
    <p>Todo Page</p>
  </q-page>
</template>

<script>
export default {
}
</script>
<style>
</style>

Screenshoot:

Thank you in advance for your help.

[s.molinari]

You need to put your v-for on the QRouteTabs in the QTabs. Right now, your "v-for"ing the whole footer tab component.

Scott

[mecanicoweb]

@s-molinari Thank you, I solved the problem following yor advice, I hope this could help someone else, here is the code:

FooterTabs.vue (Component):

<template>
  <q-footer elevated>
    <q-tabs>
      <q-route-tab
        v-for="link in essentialLinks"
        :key="link.essentialLinks"
        :icon="link.icon"
        :to="link.to"
        :label="link.label" />
    </q-tabs>
  </q-footer>
</template>

<script>
export default {
  name: 'FooterTabs',
  props: {
    essentialLinks: {
      type: Array
      // default: [] ?
    }
  }
}
</script>

Now, the component can be used liked this:

<FooterTabs :essentialLinks="essentialLinks" />

[mecanicoweb]

I dont know why I put the key this way :key=“link.essentialLinks” and works, I changed to :key=“link.label” because seems more logic to me, also works. I suppose that the best practice should be to use some kind of id.