q-side-link is not clickable



  • Hi, I am a beginner with vue and quasar and I am working through the documentation and building a mock app.

    I am trying to use q-side-link to route to different pages, but the menu item becomes non clickable. I have the same problem with this fiddle https://jsfiddle.net/ypL7nLrh/30/, so I am really at a loss.

    Suggestions anyone? Thanks.

    <q-layout-drawer
              v-model="drawerState"
              :content-class="$q.theme === 'mat' ? 'bg-grey-3' : null"
            >
              <q-list no-border link inset-delimiter dense>
                <q-list-header>Menu</q-list-header>
         
                <q-side-link item to="/foo" exact>
                    <q-item>
                        <q-item-main label="Foo router"> </q-item-main>
                    </q-item>
                </q-side-link>
              </q-list>
            </q-layout-drawer>


  • So I don’t see q-side-link on the QList sub components. So remove that line of code and add to="/foo" to the q-item without the exact



  • This should do.

    <q-layout-drawer
    v-model=“drawerState”
    :content-class="$q.theme === ‘mat’ ? ‘bg-grey-3’ : null"
    >
    <q-list no-border link inset-delimiter dense>
    <q-list-header>Menu</q-list-header>

                <q-item to="/foo">
                    <q-item-main label="Foo router"> </q-item-main>
                </q-item>
            
          </q-list>
        </q-layout-drawer>


  • Thanks syflex. That’s it, it works perfectly now.

    I got the q-side-link from here: https://v0-14.quasar-framework.org/components/layout-side-links.html
    but did not notice that it refers to an older version. The new syntax seems much more straight-forward btw.

    Thanks
    again.


Log in to reply