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:
    alt text

    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.


Log in to reply