web-dev-qa-db-ja.com

ブール値に基づくNUXTリンクを無効にする

データ変数に基づいてNUEXTリンクを無効にするのに良い方法を見つけることはできません。誰かが何かを提案することができますか？私は疑問を見てみましたが、私は何も思い付くことはできません。

disable私はこのようなことをしたいのはブール値を持っていますか

<nuxt-link :disabled="disable"></nuxt-link> _

Booleanがfalseに設定されている場合は、基本的にリンクをクリック可能にしたくないだけです。

vuejs2vue-routernuxt.js
8
Samantha

私は、最も簡単な方法で、無効なリンクのクラスを作成するだけであることがわかりました。これがそれを行うための最良の方法であるかどうかはまだわかりませんが、それは私のために働き、私が欲しいものを正確にします。

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

私のCSS

.disabled {
  color: lightgrey
  pointer-events: none
}
 _
3
Samantha

_<nuxt-link>_はVue router の_<router-link>_です。

event prop を使用して無効にすることができます。

dataまたはcomputedプロパティの一つを仮定すると、disabled boolean：

_<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>_
1
yqlim

これを行うもう1つの方法で、私は一番好きです。タグをbuttonに変更し、ネイティブ_:disabled_ stateを使用することです。

_<nuxt-link tag="button" :disabled="disable" to="/some/location">Some location</nuxt-link>
_

その後、ボタンをスタイルの助けを借りてリンクにしてください。

0
GONG