Nuxt.jsのnuxt-linkを非活性にしたい

Question

前提・実現したいこと

nuxt-linkの遷移リンクをdisableにしたいです
画面のフラグによってリンクを活性、非活性に変更したいです
今現時点でリンクをボタンに見立てたcssを追加して表示しています。
nuxt-linkにdisabledなどの設定がない為、非活性で画面に存在させるのを、
どのように実現していいかわかりません

<nuxt-link :to="`/hoge/hage/${id}`" class="btn" >　遷移ボタン　</nuxt-link>

試したこと

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

:event を使って制御してみましたが
左下にリンクも出るし、そもそも押せない、といった動きにしたいです。

Answer 1

非活性用のクラスを作ってcssで対応されてはどうでしょうか

<template>
  <nuxt-link :to="/" class="btn" :class="{ 'is-disabled': disabledFlag }" >
    遷移ボタン
  </nuxt-link>
</template>

<style>
.btn.is-disabled {
  pointer-events: none;
  opacity: .5;
}
</style>

Comments

[ms5025]

ありがとうございます！！
うまく思い通りにいけました！！