Vue.js의 조건부는 프로펠러 값에 따라 달라지는가?

Vue.js의 조건부는 프로펠러 값에 따라 달라지는가?

이것이 다소 간단한 질문/답변이었으면 좋겠는데, 문서에서 많은 정보를 찾을 수 없다.

에 의해 생성된 앵커를 활성화하거나 비활성화할 수 있는 방법이 있는가?<router-link>소품 전달 여부에 따라 달라지는가?

<router-link class="Card__link" :to="{ name: 'Property', params: { id: id }}">
  <h1 class="Card__title">{{ title }}</h1>
  <p class="Card__description">{{ description }}</p>
</router-link>

없으면id이 구성 요소로 전달된 링크를 사용하지 않도록 설정하십시오.

콘텐츠를 두 배로 늘리지 않고 이 작업을 수행할 수 있는 방법이 있는가?v-if?

고마워!

클릭할 수 없는 경우와 같이 앵커 태그를 비활성화하고 비활성화된 것으로 보이려면 CSS 옵션을 사용하고 있다. isActive는 프로펠러 ID를 확인하여 true를 반환해야 한다.

<router-link class="Card__link" v-bind:class="{ disabled: isActive }" :to="{ name: 'Property', params: { id: id }}">
  <h1 class="Card__title">{{ title }}</h1>
  <p class="Card__description">{{ description }}</p>
</router-link>

<style>
 .disabled {
    pointer-events:none; 
    opacity:0.6;        
 }
<style>

만약 당신이 단지 항법을 비활성화하기를 원한다면, 당신은 경로 가드를 사용할 수 있다.

beforeEnter: (to, from, next) => {
            next(false);
 }

자주 사용해야 하는 경우 다음을 고려하십시오.

새 구성 요소 생성

<template>
  <router-link
    v-if="!disabled"
    v-bind="$attrs"
  >
    <slot/>
  </router-link>

  <span
    v-else
    v-bind="$attrs"
  >
    <slot/>
  </span>
</template>

<script>
export default {
  name: 'optional-router-link',

  props: {
    params: Object,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

선택 사항, 전역으로 등록:

Vue.component('optional-router-link', OptionalRouterLink);

다음과 같이 사용하십시오.

<optional-router-link
  :disabled="isDisabled"
  :to="whatever"
>
    My link
</optional-router-link>

문제는 이다router-linkHTML 앵커 태그로 렌더와 앵커 태그는disabled기여하다그러나 추가할 수 있음tag="button"로router-link:

<router-link :to="myLink" tag="button" :disabled="isDisabled" >

그런 다음 Vue는 당신의 링크를 버튼처럼 렌더링할 것이며, 이것은 자연스럽게 당신의 링크를 지탱해 줄 것이다.disabled기여하다문제 해결!링크처럼 보이도록 추가 스타일링을 제공해야 한다는 단점이 있다.그러나 이것이 이 기능을 달성하는 가장 좋은 방법이며 어떤 것에 의존하지 않는다.pointer-events해킹을 하다

나는 가끔 이런 일을 한다.

<component
    :is="hasSubLinks ? 'button' : 'router-link'"
    :to="hasSubLinks ? undefined : href"
    :some-prop="computedValue"
    @click="hasSubLinks ? handleClick() : navigate"
>
    <!-- arbitrary markup -->
</component>

...

computed: {
    computedValue() {
        if (this.hasSubLinks) return 'something';
        if (this.day === 'Friday') return 'tgif';
        return 'its-fine';
    },
},

그러나 나는 기본적으로 라우터 링크를 항상 감싼다. 그래서 당신은 비활성화된 상태를 통제할 수 있다. 또는 링크를 렌더링하기 전에 어떤 상태나 소품들을 미리 검사할 수 있다. 다음과 같은 것으로:

<template>
    <router-link
        v-slot="{ href, route, navigate, isActive, isExactActive }"
        :to="to"
    >
        <a
            :class="['nav-link-white', {
                'nav-link-white-active': isActive,
                'opacity-50': isDisabled,
            }]"
            :href="isDisabled ? undefined : href"
            @click="handler => handleClick(handler, navigate)"
        >
            <slot></slot>
        </a>

    </router-link>
</template>

<script>
export default {
    name: 'top-nav-link',

    props: {
        isDisabled: {
            type: Boolean,
            required: false,
            default: () => false,
        },

        to: {
            type: Object,
            required: true,
        },
    },

    data() {
        return {};
    },

    computed: {},

    methods: {
        handleClick(handler, navigate) {
            if (this.isDisabled) return undefined;
            return navigate(handler);
        },
    },

};
</script>

지금 내 앱에서, 나는 몇몇 조합이@click="handler => handleClick(handler, navigate)"실적이 현저히 부진하다

예를 들어, 이 변경은 경로를 매우 느리게 변경한다.

@click="isDisabled ? undefined : handler => navigate(handler)"

그러나 위의 전체 예시 코드의 패턴은 작동하며 성능 문제가 없다.

일반적으로, 3차 연산자는@click매우 위험할 수 있기 때문에, 만약 문제가 생긴다면, 즉시 포기하지 말고, 술어를 분리하거나 바꿀 수 있는 많은 다른 방법을 시도하라.<component :is=""주를 기준으로항법 그 자체는 암묵적인 첫 번째 매개변수가 작동해야 하기 때문에 골치 아픈 것이다.

노력한 적은 없지만, 넌 이런 걸 사용할 수 있어야 해.Function.prototype.call(),Function.prototype.apply()또는Function.prototype.bind().

예를 들어 다음과 같은 작업을 수행할 수 있다.

@click="handler => setupNavigationTarget(handler, navigate)"

...

setupNavigationTarget(handler, cb) {
    if (this.isDisabled) return undefined;
    return this.$root.$emit('some-event', cb.bind(this, handler));
},

...

// another component
mounted() {
    this.$root.$on('some-event', (navigate) => {
        if (['Saturday', 'Sunday'].includes(currentDayOfTheWeek)) {
            // halt the navigation event
            return undefined;
        }

        // otherwise continue (and notice how downstream logic
        // no longer has to care about the bound handler object)
        return navigate();
    });
},

다음을 사용할 수도 있다.

<router-link class="Card__link" :to="id ? { name: 'Property', params: { id: id }} : {}">
  <h1 class="Card__title">{{ title }}</h1>
  <p class="Card__description">{{ description }}</p>
</router-link>

ID가 정의되지 않은 경우 라우터는 페이지를 링크로 리디렉션하지 않는다.

다른 방법을 써봤지만 단 한 가지 방법이 효과가 있었어. Nuxt에서 온 거라면 달리기를 하는 거라서 그런가?이론적으로는 그렇지만nuxt-link정확히 A똑같이 작동해야 한다로 같은 일할까.router-link.

어쨌든 해결책은 다음과 같다.

<template>
    <router-link
        v-slot="{ navigate }"
        custom
        :to="to"
    >
        <button
            role="link"
            @click="onNavigation(navigate, $event)"
        >
            <slot></slot>
        </button>
    </router-link>
</template>

<script>
export default {
    name: 'componentName',
    props: {
        to: {
            type: String,
            required: true,
        },
    },
    methods: {
        onNavigation(navigate, event) {
        if (this.to === '#other-action') {
            // do something
        } else {
            navigate(event);
        }
        return false;
    },
};
</script>

참조URL: https://stackoverflow.com/questions/44829965/conditional-router-link-in-vue-js-dependant-on-prop-value