부울에 따라 nuxt 링크 사용 안 함

부울에 따라 nuxt 링크 사용 안 함

데이터 변수에 따라 nuxt-link를 비활성화하는 좋은 방법을 찾을 수 없습니다.누가 제안 좀 해줄래?나는 도큐멘테이션에 대해 알아봤지만 아무것도 떠오르지 않는다.

라고 하는 부울이 있다고 합니다.disable이런 거 하고 싶다

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

기본적으로 부울이 false로 설정된 경우 링크를 클릭할 수 없도록 합니다.

<nuxt-link> 는 본질적으로 Vue Router의 것입니다.

소품을 사용하여 비활성화할 수 있습니다.

그 중 한 사람이data또는computed속성은disabled부울:

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

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.min.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>
    <router-link to="/baz">Go to Baz</router-link>
  </p>
  <router-view></router-view>
</div>

가장 간단한 방법은 비활성화된 링크에 대한 클래스를 만드는 것입니다.이것이 최선의 방법인지는 아직 잘 모르겠지만, 그것은 나에게 효과가 있고 내가 원하는 것을 정확히 해 준다.

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

나의 css

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

또 다른 방법으로, 제가 가장 하고 싶은 일입니다.태그를 로 변경하는 것입니다.button네이티브를 사용합니다.:disabled주.

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

그런 다음 스타일을 이용하여 버튼을 링크로 돌리기만 하면 됩니다.

Vue Router 4에서는router-link지지하지 않다tag그리고.event더 이상 소품들을요.여기에서 자세한 정보를 얻을 수 있습니다.

위의 링크에서 예를 복사합니다.

replace
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
with
<router-link to="/about" custom v-slot="{ navigate }">
  <span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
</router-link>

실제 사용 예를 들어보겠습니다.실제 프로젝트에서 사용하는 이 코드 조각은 핵스트와 순풍을 사용합니다.

<nuxt-link
  v-slot="{ navigate }"
  class="flex-grow font-ember"
  :to="`lesson/${l.lesson_id}`"
  append
  custom
>
  <button
    class="flex items-center"
    :class="{
      'text-gray-400 cursor-not-allowed': !l.released,
      'text-gray-900': l.released,
    }"
    :disabled="!l.released"
    @click="navigate"
  >
    ...
  </button>
</nuxt-link>

이 경우 클릭할 수 있습니다.비활성화되어 있지만 클릭할 수 있습니다.속성을 사용해야 합니다.tag네 안에nuxt-link

예:<nuxt-link tag="button" :disabled="disable"></nuxt-link>

를 추가해 주세요.eventnuxt-link를 디세블로 하는 경우

<nuxt-link event="">Go to Foo</nuxt-link>

언급URL : https://stackoverflow.com/questions/55292592/disable-nuxt-link-based-on-boolean