TransWikia.com

Disable nuxt link based on boolean

Stack Overflow Asked by Samantha on January 12, 2021

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

3 Answers

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

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

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

Answered by GONG on January 12, 2021

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
}

Answered by Samantha on January 12, 2021

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

You can disable it 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/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.min.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- Assume they are <nuxt-link> because they are the same -->
    <router-link
      :event="disabled ? '' : 'click'"
      to="/foo"
    >
      Go to Foo
    </router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-link to="/baz">Go to Baz</router-link>
  </p>
  <router-view></router-view>
</div>

Answered by yqlim on January 12, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP