q-side-link is not clickable

[bruno.ronchetti]

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>

[syflex]

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

[syflex]

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>

[bruno.ronchetti]

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.