Vue 조건부 v-on 이벤트 차단 한정자

Vue 조건부 v-on 이벤트 차단 한정자

v-on의 사용 방법.prevent내가 그것을 역동적으로 사용할 때 수식어?

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on="overlayClickClosesModal ? { click: () => closeModal() } : {}"
/>

URL이 첨부되는 것을 중지하려고 함/#

노력했다

v-on.prevent

v-on:prevent

v-on="overlayClickClosesModal ? { 'click.prevent':

이 논리를 하나의 방법으로 옮기면 훨씬 더 명확해진다.

<a href="#" @click="clickMethod">

그런 다음 스크립트 부분을 확인하십시오.

clickMethod (event) {
    if (this.overlayClickClosesModal) {
        event.preventDefault();
    }
}

---

왜 링크에 닻을 올리는 거야?그것은 필요하지 않고 당신은 그 일을 아낄 수 있다.

---

Vue: https://github.com/vuejs/vue/issues/9417에서는 동적으로 추가되는 수식어가 지원되지 않는 것 같다.

같은 이벤트를 사용하고 있기 때문에 (click) 조건부로 간단히 할 수 있는 것은:

    v-on:click.prevent="overlay ? close(): {}"

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      overlay: true

    }
  },
  methods: {
    close() {
      console.log("close")
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <a href="#" class="modal-overlay" aria-label="Close" v-on:click.prevent="overlay ? close(): {}" >close</a>
</div>

한 가지 해결책은 다음 항목을 대체하는 것이다..prevent 이벤트 핸들러 내부로 직접 통화가 가능한 이벤트 한정자:

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on:click="maybeCloseModal"
/>

…과 함께maybeCloseModal정의한 방법methods다음과 같은 섹션:

maybeCloseModal: function (event) {
  if (this.overlayClickClosesModal) {
    event.preventDefault();  // this will do the same thing as .prevent
    this.closeModal();
  }
}

하지만 솔직히, 나는 이것이 어쨌든 당신의 경우에서 할 수 있는 정말 현명한 행동인지 잘 모르겠어, 왜냐하면 당신의 링크를 클릭하는 기본 행동은 어떤 식으로든 유용해 보이지 않기 때문이다.따라서 다음과 같이 무조건적으로 예방하는 것이 좋을 것이다.

<a
  href="#"
  class="modal-overlay"
  aria-label="Close"
  v-on:click.prevent="overlayClickClosesModal && closeModal()"
/>

그 일이라면, 당신은 아마 그 일을 하고 싶을 것이다.aria-label같은 부울 깃발도 조건부야또는 두 가지 버전의 오버레이(클릭 가능 한 버전과 클릭 불가능 한 버전)를 사용하여 다음 중 하나를 선택하십시오.v-if.

참조URL: https://stackoverflow.com/questions/57885709/vue-conditional-v-on-event-prevent-modifier