Issue rendering component using v-for
-
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.
-
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
-
@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" />
-
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.