[Vuejs]-NuxtJS: Disable link if id is undefined or empty

by

3👍

✅

<router-link> or <nuxt-link> is rendered with <a> by default (Refer to Vue Router Guide), <a> doesn’t have attr=disabled exists in <button>.

One solution is binds props=to like nickname ? next-route : '', and uses same way to toggle your own disabled classes/styles.

<nuxt-link :to="nickname ? {
  name: 'player-id',
  params: {
    id: nickname
  }
} : ''">{{ username }}</nuxt-link>
👤Sphinx

1👍

As it’s turned out you cannot add disabled attr to nuxt-link, you need to fake disabled state with css.

<nuxt-link :to="{
  name: 'player-id',
  params: {
    id: nickname
  }}"
  :class="{'disabled-link': !nickname}"
  >{{ username }}</nuxt-link>

In your styles:

 .disabled-link {
   color: grey;
   cursor-pointer: none;
 }

Also I’d suggest you to remove your route object to computed properties not to clutter the template:

 <nuxt-link :to="userPath"
  :class="{'disabled-link': !nickname}"
  >{{ username }}</nuxt-link>

computed: {
userPath() {
 return {
  name: 'player-id',
  params: {
    id: this.nickname
  }}
}
}
👤Dvdgld

1👍

You can use v-if , v-else to render nuxt-link or just a text

<nuxt-link v-if="nickname"
  :to="{
  name: 'player-id',
  params: {
    id: nickname
  }
}">{{ username }}</nuxt-link>
<i v-else>{{ username }}</i>
👤Mohsen

Leave a comment