Conditional In Vue.js Dependant On Prop Value?

Answer :

Assuming you want to disable anchor tag as in not clickable and look disabled the option is using CSS. isActive should return true by checking prop id.

<router-link class="Card__link" v-bind:class="{ disabled: isActive }" :to="{ name: 'Property', params: { id: id }}">
  <h1 class="Card__title">{{ title }}</h1>
  <p class="Card__description">{{ description }}</p>
</router-link>

<style>
 .disabled {
    pointer-events:none; 
    opacity:0.6;        
 }
<style>

If you want to just disable the navigation , you can use a route guard.

beforeEnter: (to, from, next) => {
            next(false);
 }

The problem is that router-link renders as an html anchor tag, and anchor tags do not support the disabled attribute. However you can add tag="button" to router-link:

<router-link :to="myLink" tag="button" :disabled="isDisabled" >

Vue will then render your link as a button, which naturally supports the disabled attribute. Problem solved! The downside is that you have to provide additional styling to make it look like a link. However this is the best way to achieve this functionality and does not rely on any pointer-events hack.

If you need to use it often, consider this:

Create new component

<template>
  <router-link
    v-if="!disabled"
    v-bind="$attrs"
  >
    <slot/>
  </router-link>

  <span
    v-else
    v-bind="$attrs"
  >
    <slot/>
  </span>
</template>

<script>
export default {
  name: 'optional-router-link',

  props: {
    params: Object,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

Optional, register globally:

Vue.component('optional-router-link', OptionalRouterLink);

Use it as follows:

<optional-router-link
  :disabled="isDisabled"
  :to="whatever"
>
    My link
</optional-router-link>