Condicional en Vue.js depende del valor de la prop?

Solución:

Suponiendo que desea deshabilitar la etiqueta de anclaje porque no se puede hacer clic y parece deshabilitado, la opción está usando CSS. está activo debería devolver verdadero comprobando la identificación de la prop.

<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>

Si solo desea deshabilitar la navegación, puede usar un protector de ruta.

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

El problema es ese router-link se representa como una etiqueta de anclaje html y las etiquetas de anclaje no admiten la disabled atributo. Sin embargo, puedes agregar tag="button" para router-link:

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

Vue luego renderizará su enlace como un botón, que naturalmente es compatible con disabled atributo. ¡Problema resuelto! La desventaja es que debe proporcionar un estilo adicional para que parezca un enlace. Sin embargo, esta es la mejor manera de lograr esta funcionalidad y no depende de ninguna pointer-events cortar a tajos.

Si necesita usarlo con frecuencia, considere esto:

Crear nuevo componente

<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>

Opcional, regístrese globalmente:

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

Úselo de la siguiente manera:

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

---

---

Utiliza Nuestro Buscador