Menu
I have a single-page app that i've created using vue, and the nav links are all done using router-link tags. There are a couple of items in the nav that my boss wants to have in the nav but disabled so that people can get a glimpse of some features that will be coming soon. However I can't figure out how to completely disable a router-link!
preventDefault does nothing, @click.native.prevent="stopClick()" does nothing (i tried sending it to a function to see if that would prevent the click but it just calls the function and routes anyway despite the prevent), adding a disabled class and setting a css rule of pointer-events: none; does nothing. I'm not sure what else to try, is the only way around this to make the disabled links normal text and not router-links?
552
To conditionally disable a button element in Vue. js, you can dynamically bind the disable attribute to an expression that evaluates to boolean true (to disable the button) or false (to enable the button). Please note that :disable is a shorthand syntax for writing v-bind:disable .
Set the pointer events CSS property to none to disable a Link in React, e.g. <Link style={{pointerEvents: 'none'}}> . When the pointer events property of the link is set to none , the link is disabled.
Vue Button component can be enabled/disabled by giving disabled property. To disable Vue Button component, the disabled property can be set as true .
There is still no native solution today. But there is an open PR for this on the vue-router repo : https://github.com/vuejs/vue-router/pull/2098.
A workaround is to use :
<router-link :disabled="!whateverActivatesThisLink" :event="whateverActivatesThisLink ? 'click' : ''" to="/link" > /link </router-link> You can use
<router-link :is="isDisabled ? 'span' : 'router-link'" to="/link" > /link </router-link> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
