Vue.jsの条件付き小計<router-link>は小売価格に依存しますか？

Question

うまくいけば、これはむしろ単純な質問/回答ですが、私はドキュメントで多くの情報を見つけることができません。

小道具を渡すかどうかによって、<router-link>によって生成されたアンカーを有効または無効にする方法はありますか？

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

このコンポーネントに渡された無idはありません場合、私は、生成された任意のリンクを無効にしたいと思います。

v-ifにコンテンツを倍増せずにこれを行う方法はありますか？

ありがとうございます！

Answer 1

クリック可能ではないアンカータグを無効にし、無効にするにはCSSを使用するとします。 isActiveは、prop idをチェックしてtrueを返す必要があります。

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

ナビゲーションを無効にする場合は、ルートガードを使用できます。

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