QSideLink - Not Clickable

[lattamore]

When a side link is marked as disabled it shows correctly being grey and cursor, but it is still clickable. How can we tell it to not go to the route and not be clickable?

<q-side-link v-bind:class="{ 'disabled': !searchEnabled}" item :to="{name: 'customersearch'}" exact >
  <q-item-side icon="search" />
  <q-item-main :label="$t('customers.side-nav.customers.customer-search')" />
</q-side-link>

[benoitranque]

Use pointer-events css attribute. Quasar comes with a helper class for it. Here is an example:

<q-side-link :class="{ 'disabled': !searchEnabled, 'no-pointer-events': !searchEnabled }" item :to="{name: 'customersearch'}" exact >
  <q-item-side icon="search" />
  <q-item-main :label="$t('customers.side-nav.customers.customer-search')" />
</q-side-link>

Protip: :class is the same as v-bind:class and @click is the same as v-on:click

Edit: see below post

[lattamore]

Thank you for the help!

Did you mean :class is the same as v-bind:class?

[Epo]

v-bind:class --> :class
v-on:click --> @click

https://vuejs.org/v2/guide/syntax.html#Shorthands

[benoitranque]

@lattamore Yep my mistake there