CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Daryl Wong
Daryl Wong

Reputation: 2443

NuxtJS: Disable link if id is undefined or empty

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

How could I disable the nuxt link above if nickname is undefined or empty like ""?

Upvotes: 0

Views: 2627

Answers (3)

Mohsen
Mohsen

Reputation: 4235

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>

Upvotes: 1

Dvdgld
Dvdgld

Reputation: 2164

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
  }}
}
}

Upvotes: 1

Sphinx
Sphinx

Reputation: 10729

<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>

Upvotes: 3

Related Questions