CODEWITHSUNDEEP
vuejs2vue-routernuxt.js
Samantha
Samantha

Reputation: 849

Disable nuxt link based on boolean

I can't seem to find a good way to disable a nuxt-link based on a data variable. Could anyone suggest something? I've tried looking at doucmentation but I can't come up with anything.

Say I have a boolean called disable I want to do something like this

<nuxt-link :disabled="disable"></nuxt-link>

I basically just don't want the link to be clickable if the boolean is set to false

Upvotes: 18

Views: 29818

Answers (9)

Player1
Player1

Reputation: 3166

In Nuxt 2, using null in

:to="condition ? path : null"

will result in this error: Type 'string | null' is not assignable to type 'string.

use undefined instead:

:to="condition ? path : undefined"

Upvotes: 0

yqlim
yqlim

Reputation: 7080

<nuxt-link> is essentially <router-link> of Vue Router.

For Nuxt2, you can disable a link using the event prop.

Assuming your one of your data or computed property is disabled boolean:

<nuxt-link :event="disabled ? '' : 'click'"></nuxt-link>

Working example:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/baz', component: Baz }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  data(){
    return {
      disabled: true
    }
  }
}).$mount('#app')
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <div>
    <!-- Assume they are <nuxt-link> because they are the same -->
    <router-link
      :event="disabled ? '' : 'click'"
      to="/foo"
    >
      Go to Foo ({{ disabled ? 'Disabled' : 'Enabled' }})
    </router-link>&nbsp;
    <router-link to="/bar">Go to Bar</router-link>&nbsp;
    <router-link to="/baz">Go to Baz</router-link>
  </div><br />
  <button @click="disabled = !disabled">Toggle Foo availability</button><br /><br />
  <router-view></router-view>
</div>

Upvotes: 36

dqvsra
dqvsra

Reputation: 76

In Nuxt3 this works for me: :to="canNavigate ? link : null"

Upvotes: 5

Michael Sinclair
Michael Sinclair

Reputation: 306

None of these seemed to work for me, so I set the :to on the nuxt-link to a computed method. The to attribute on nuxt link will redirect nowhere when empty. For example:

<script>
export default{
    computed: {
        redirectRequest(){
            return this.isMobile ? "" : "/Worklog";
        }
    }
}
</script>

<template>
    <NuxtLink :to="redirectRequest"></NuxtLink>
</template>

Upvotes: 0

GrigorAtaryan
GrigorAtaryan

Reputation: 473

For this case anyway you can click on it. It displaying disabled but still clickable. You need to use attribute tag in you nuxt-link

Example here <nuxt-link tag="button" :disabled="disable"></nuxt-link>

Upvotes: 0

GONG
GONG

Reputation: 4026

Another way to do this, which I'd like the most. Is to change the tag to the button and use the native :disabled state.

<nuxt-link tag="button" :disabled="disabled" to="/some/location">Some location</nuxt-link>

Then just turn the button into the link with the help of styles.

Upvotes: 11

drocha87
drocha87

Reputation: 629

In Vue Router 4, router-link do not support tag and event props anymore. Here you can have more information.

I'll copy the example from the link above here:

replace
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
with
<router-link to="/about" custom v-slot="{ navigate }">
  <span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
</router-link>

And I'll give a real example of usage. This piece of code I'm using in a real project, using nuxt and tailwind.

<nuxt-link
  v-slot="{ navigate }"
  class="flex-grow font-ember"
  :to="`lesson/${l.lesson_id}`"
  append
  custom
>
  <button
    class="flex items-center"
    :class="{
      'text-gray-400 cursor-not-allowed': !l.released,
      'text-gray-900': l.released,
    }"
    :disabled="!l.released"
    @click="navigate"
  >
    ...
  </button>
</nuxt-link>

Upvotes: 3

Jeremy
Jeremy

Reputation: 1952

Just add the event prop if you simply want to disable a nuxt-link

<nuxt-link event="">Go to Foo</nuxt-link>

Upvotes: 0

Samantha
Samantha

Reputation: 849

I found that the most simple way was to just create a class for the disabled links. I'm still not sure if this is the best way to do it but it works for me and does exactly what I want.

<nuxt-link to="/search" :class="{ disabled: disabled }"> Search </nuxt-link>

my css

.disabled {
   color: lightgrey
   pointer-events: none
}

Upvotes: 12

Related Questions