基于布尔值禁用nuxt链接

Question

我似乎找不到基于数据变量禁用 nuxt 链接的好方法。有人可以提出建议吗？我试过查看文档，但我想不出任何东西。

假设我有一个布尔值叫做disable我想做这样的事情

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

如果布尔值设置为 false，我基本上只是不希望链接可点击

Answer 1

<nuxt-link>本质上<router-link>是 Vue Router。

您可以使用eventprop禁用它。

假设您的dataorcomputed属性之一是disabled布尔值：

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

工作示例：

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

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/baz', component: Baz }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  data(){
    return { disabled: true }
  }
}).$mount('#app')

Answer 2

我发现最简单的方法是为禁用的链接创建一个类。我仍然不确定这是否是最好的方法，但它对我有用并且完全符合我的要求。

<nuxt-link to="/search" :class="{ disabled: disabled }"> Search </nuxt-link>

我的 CSS

.disabled {
   color: lightgrey
   pointer-events: none
}

Answer 3

另一种方法来做到这一点，这是我最喜欢的。是将标记更改为button和使用本机:disabled状态。

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

然后只需在样式的帮助下将按钮变成链接。