Why is the maximum length of OpenWrt’s root password 8 characters?

What is the closest word meaning "respect for time / mindful"

Why didn't the Event Horizon Telescope team mention Sagittarius A*?

How to save as into a customized destination on macOS?

How to support a colleague who finds meetings extremely tiring?

Do these rules for Critical Successes and Critical Failures seem fair?

How can I autofill dates in Excel excluding Sunday?

What to do when moving next to a bird sanctuary with a loosely-domesticated cat?

What does ひと匙 mean in this manga and has it been used colloquially?

Loose spokes after only a few rides

Should I use my personal e-mail address, or my workplace one, when registering to external websites for work purposes?

Are there incongruent pythagorean triangles with the same perimeter and same area?

Geography at the pixel level

Origin of "cooter" meaning "vagina"

Falsification in Math vs Science

Are spiders unable to hurt humans, especially very small spiders?

Does a dangling wire really electrocute me if I'm standing in water?

Aging parents with no investments

What is the most effective way of iterating a std::vector and why?

Lightning Grid - Columns and Rows?

Can we generate random numbers using irrational numbers like π and e?

Can someone be penalized for an "unlawful" act if no penalty is specified?

How to deal with fear of taking dependencies

Return to UK after having been refused entry years ago

Disable nuxt link based on boolean

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

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

vuejs2 vue-router nuxt

share|improve this question

edited Mar 22 at 4:13

Samantha

asked Mar 22 at 3:45

SamanthaSamantha

16819

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Change ="disable" to ="disabled"
  
  – Sajib Khan
  Mar 22 at 3:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  uh sorry my bad, my code does say disabled. I don't think nuxt-link supports this prop, but I just need help with a way to stop the link from being clickable if a boolean is false
  
  – Samantha
  Mar 22 at 4:13
  

  
  
  
  

add a comment | 

0

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

vuejs2 vue-router nuxt

share|improve this question

edited Mar 22 at 4:13

Samantha

asked Mar 22 at 3:45

SamanthaSamantha

16819

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Change ="disable" to ="disabled"
  
  – Sajib Khan
  Mar 22 at 3:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  uh sorry my bad, my code does say disabled. I don't think nuxt-link supports this prop, but I just need help with a way to stop the link from being clickable if a boolean is false
  
  – Samantha
  Mar 22 at 4:13
  

  
  
  
  

add a comment | 

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

vuejs2 vue-router nuxt

share|improve this question

edited Mar 22 at 4:13

Samantha

asked Mar 22 at 3:45

SamanthaSamantha

16819

share|improve this question

edited Mar 22 at 4:13

Samantha

asked Mar 22 at 3:45

SamanthaSamantha

16819

share|improve this question

edited Mar 22 at 4:13

Samantha

asked Mar 22 at 3:45

SamanthaSamantha

16819

asked Mar 22 at 3:45

SamanthaSamantha

16819

asked Mar 22 at 3:45

SamanthaSamantha

16819

2 Answers
2

active

oldest

votes

1

<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 routes = [
 path: '/foo', component: Foo ,
 path: '/bar', component: Bar 
]

const router = new VueRouter(
 routes
)

const app = new Vue(
 router,
 data()
 return disabled: true 
 
).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.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>
 </p>
 <router-view></router-view>
</div>

share|improve this answer

edited Mar 22 at 4:33

answered Mar 22 at 4:21

Yong QuanYong Quan

3,0602928

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help, I decided to just add a class based on the boolean because I didn't want the link to be clickable
  
  – Samantha
  Mar 24 at 22:08
  
  

  
  
  
  

add a comment | 

0

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

share|improve this answer

answered Mar 24 at 22:12

SamanthaSamantha

16819

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55292592%2fdisable-nuxt-link-based-on-boolean%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

<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 routes = [
 path: '/foo', component: Foo ,
 path: '/bar', component: Bar 
]

const router = new VueRouter(
 routes
)

const app = new Vue(
 router,
 data()
 return disabled: true 
 
).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.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>
 </p>
 <router-view></router-view>
</div>

share|improve this answer

edited Mar 22 at 4:33

answered Mar 22 at 4:21

Yong QuanYong Quan

3,0602928

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help, I decided to just add a class based on the boolean because I didn't want the link to be clickable
  
  – Samantha
  Mar 24 at 22:08
  
  

  
  
  
  

add a comment | 

1

<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 routes = [
 path: '/foo', component: Foo ,
 path: '/bar', component: Bar 
]

const router = new VueRouter(
 routes
)

const app = new Vue(
 router,
 data()
 return disabled: true 
 
).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.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>
 </p>
 <router-view></router-view>
</div>

share|improve this answer

edited Mar 22 at 4:33

answered Mar 22 at 4:21

Yong QuanYong Quan

3,0602928

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you for your help, I decided to just add a class based on the boolean because I didn't want the link to be clickable
  
  – Samantha
  Mar 24 at 22:08
  
  

  
  
  
  

add a comment | 

<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 routes = [
 path: '/foo', component: Foo ,
 path: '/bar', component: Bar 
]

const router = new VueRouter(
 routes
)

const app = new Vue(
 router,
 data()
 return disabled: true 
 
).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.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>
 </p>
 <router-view></router-view>
</div>

share|improve this answer

edited Mar 22 at 4:33

answered Mar 22 at 4:21

Yong QuanYong Quan

3,0602928

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

const Foo = template: '<div>foo</div>' 
const Bar = template: '<div>bar</div>' 

const routes = [
 path: '/foo', component: Foo ,
 path: '/bar', component: Bar 
]

const router = new VueRouter(
 routes
)

const app = new Vue(
 router,
 data()
 return disabled: true 
 
).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.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>
 </p>
 <router-view></router-view>
</div>

const Foo = template: '<div>foo</div>' 
const Bar = template: '<div>bar</div>' 

const routes = [
 path: '/foo', component: Foo ,
 path: '/bar', component: Bar 
]

const router = new VueRouter(
 routes
)

const app = new Vue(
 router,
 data()
 return disabled: true 
 
).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.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>
 </p>
 <router-view></router-view>
</div>

const Foo = template: '<div>foo</div>' 
const Bar = template: '<div>bar</div>' 

const routes = [
 path: '/foo', component: Foo ,
 path: '/bar', component: Bar 
]

const router = new VueRouter(
 routes
)

const app = new Vue(
 router,
 data()
 return disabled: true 
 
).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.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>
 </p>
 <router-view></router-view>
</div>

share|improve this answer

edited Mar 22 at 4:33

answered Mar 22 at 4:21

Yong QuanYong Quan

3,0602928

answered Mar 22 at 4:21

Yong QuanYong Quan

3,0602928

answered Mar 22 at 4:21

Yong QuanYong Quan

3,0602928

0

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

share|improve this answer

answered Mar 24 at 22:12

SamanthaSamantha

16819

add a comment | 

0

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

share|improve this answer

answered Mar 24 at 22:12

SamanthaSamantha

16819

add a comment | 

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

share|improve this answer

answered Mar 24 at 22:12

SamanthaSamantha

16819

<nuxt-link to="/search" :class="!disabled ? 'disabled' : ''"> Search </nuxt-link>

.disabled 
 color: lightgrey
 pointer-events: none

share|improve this answer

answered Mar 24 at 22:12

SamanthaSamantha

16819

answered Mar 24 at 22:12

SamanthaSamantha

16819

answered Mar 24 at 22:12

SamanthaSamantha

16819