データ変数に基づいてNUEXTリンクを無効にするのに良い方法を見つけることはできません。誰かが何かを提案することができますか?私は疑問を見てみましたが、私は何も思い付くことはできません。
disable
私はこのようなことをしたいのはブール値を持っていますか
<nuxt-link :disabled="disable"></nuxt-link>
_
Booleanがfalseに設定されている場合は、基本的にリンクをクリック可能にしたくないだけです。
私は、最も簡単な方法で、無効なリンクのクラスを作成するだけであることがわかりました。これがそれを行うための最良の方法であるかどうかはまだわかりませんが、それは私のために働き、私が欲しいものを正確にします。
<nuxt-link to="/search" :class="!disabled ? 'disabled' : ''"> Search </nuxt-link>
_
私のCSS
.disabled {
color: lightgrey
pointer-events: none
}
_
_<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つの方法で、私は一番好きです。タグをbutton
に変更し、ネイティブ_:disabled
_ stateを使用することです。
_<nuxt-link tag="button" :disabled="disable" to="/some/location">Some location</nuxt-link>
_
その後、ボタンをスタイルの助けを借りてリンクにしてください。