Vue: 조건부 이벤트 바인딩

@asiFarran

지금 당장은 이벤트 구독을 생성하고 핸들러에 조건을 추가해야 합니다(또는 이 경우 이벤트가 발생하지 않으므로 그럴 필요도 없습니다).

사실 이 경우를 처리할 수 있는 또 다른 간단한 방법이 있습니다. 리스너 개체(또는 조건이 충족되지 않는 경우 null)와 함께 계산된 속성을 v-on 전달할 수 있습니다. 예: https://jsfiddle.net/c0Le92xe/

어쩌면 당신이 필요합니까?
<div @mouseover="e => condition && handler(e)" />

@Kingwl 은 여전히 ​​리스너를 추가하는데, 이는 OP가 피하고자 하는 것입니다.

@sqal 의 제안은 실제로 유효한 해결 방법이며 다음과 같이 단순화할 수 있습니다.

<div v-on="{ mouseover: condition ? handler : null }">

예, @sqal 의 솔루션은 좋은 솔루션이며 @yyx990803 과 같은 인라인을 사용하면 내가 염두에 둔 것과 충분히 비슷합니다. 감사 해요!

이로 인해 더 깊은 문제가 발생합니다. 리바인드가 발생하고(데이터 변경) 평가 시 조건이 변경되면(또는 보다 일반적으로 v-on에 전달된 이벤트 사양 개체가 다른 경우) 기존 이벤트 구독이 정리 되지 않습니다 . 그것들은 여전히 ​​(바라건대) 구성 요소의 수명 주기가 끝날 때 처리되지만 v-on이 다시 바인딩될 때인 '해야 할' 때는 처리되지 않습니다.

이것은 대부분의 시나리오에 큰 영향을 미치지 않지만 참조용으로만 사용되는 극단적인 경우일 수 있습니다.

내 시나리오에서는 복잡한 SVG가 있으며 일부 논리를 기반으로 특정 요소에 마우스 오버/아웃 처리기를 선택적으로 연결해야 합니다.
구성 요소는 오래 지속되는 것으로 기본 데이터가 변경되어 각 리바인드 시 다른 요소에 이벤트 핸들러를 연결해야 하는 경우 리바인딩으로 이어집니다. 메모리.

일반적인 솔루션은 - 그리고 내가 결국 할 일은 - 하나의 '최상위' 이벤트 리스너(이벤트 유형당)를 설정하고 이벤트가 버블링되도록 하되 Vue 방식으로 먼저 시도하려는 동기를 설명하는 것입니다. , 처리기가 할 일이 적고(더 빠르고 유동적인 응답) 처리기가 호출되지 않도록 미리 계산하고 이벤트 구독 자체에 바로 굽기 위해 의도했던 처리기에서 발생해야 하는 처리가 꽤 있습니다. 필요하지 않은 요소에 대한 모든 것입니다(핸들러에서 DOM 쿼리에 의존하여 이것을 필터링하는 것과는 대조적으로).

@VsevolodTrofimov 요점은 이벤트 구독이 전혀 발생하지 않도록 하는 것이었습니다. 핸들러에서 조건을 적용하면 이 요구 사항이 충족되지 않습니다. 위의 의견은 만족스러운 해결 방법을 제공하므로 참고하십시오.

그것을 반영하기 위해 이 문제를 닫습니다.

<div v-on="{ mouseover: condition ? handler : null }">

$event 및 기타 인수를 핸들러에 전달할 수 있습니까?

@pmayer
<div v-on="{ mouseover: condition ? $event => handler($event, arg) : null }">

또는 핸들러를 카레 와 사용

<div v-on="{ mouseover: condition ? handler(arg) : null }">

제안된 솔루션으로

<div v-on="{ mouseover: condition ? handler : null }">

".stop.prevent"와 같은 수식어를 적용하는 방법이 있습니까?

안녕하세요 @yyx990803 @VsevolodTrofimov

여기에 제안된 솔루션( v-on="{ mouseover: condition ? handler : null }" )은 최신 Vue에서 실제로 작동하지 않습니다.

이 오류가 발생합니다.
Invalid handler for event "mouseover": got null

Vue가 실제로 이벤트 🤔 바인딩을 해제하는 대신 핸들러를 실행하려고 하는 것 같습니다.

@DawidMyslak
아래로 변경하면 작동합니다.

v-on="condition ? { mouseover: handler } : {}"

또는 핸들러가 mouseover

v-on="condition ? { mouseover } : {}"

멋지다 @pbastowski !

감사합니다!

사용자 지정 데이터로 처리기를 호출하는 경우 인라인 함수로 래핑할 수 있습니다. 이 같은

v-on="condition ? { mouseover: () => handler(somedata) } : {}"

이것은 Vue 문서에 있어야 합니다.

@DawidMyslak
아래로 변경하면 작동합니다.

v-on="condition ? { mouseover: handler } : {}"

또는 핸들러가 mouseover

v-on="condition ? { mouseover } : {}"

이것을 .once 와 결합하는 방법이 있습니까?

https://vuejs.org/v2/guide/render-function.html#Event -amp-Key-Modifiers를 사용할 수 있습니다.

<button v-on="{ '~click': () => foo = new Date() }">Trigger only once</button>

이에 대한 한 가지 질문은 다음을 수행할 때 메모리 누수 또는 이벤트 리스너가 제거되지 않고 조건이 정기적으로 변경됩니까?

<template>
<div  v-on="myListeners">
some content
</div>
</template>
<script>
...
computed: {
  myListeners() {
    return this.canExecute ? { click: () => this.$emit(...) } : {};
  },
},
...
</script>

간단히 말해서 v-on 가 변경 사항을 처리합니까?

@dietergeerts 그렇습니다 .

네이티브 이벤트에서 작동합니까? keydown.native 작동하지 못했습니다.

참고로 2.6(아직 출시되지 않음)부터 다음과 같이 조건부 이벤트 바인딩을 적용할 수 있습니다.

<div @[event]="handler" /> 

event 가 null 해석되는 동안 바인딩은 제거됩니다.

@Justineo 훌륭하지만 방금 베타를 시도했는데 수정자(모든 유형)에서도 작동하지 않는 것 같습니다. 아직 구현되지 않았습니까? 예정인가요?

@AlansCodeLog 모든 수정자와 함께 작동해야 합니다. 작동하지 않으면 재생산으로 새 문제를 열어야 합니다.

@yyx990803 좋아요, 재생산 가능한지 보겠습니다.

여기에서 문제를 열었습니다. #9417

어쩌면 당신이 필요합니까?
<div @mouseover="e => condition && handler(e)" />

브라우저 자바스크립트 버전

<div @mouseover="condition && handler(arguments[0])" />

@kieryk123 볼 수 있는 CodeSandbox 링크를 제공할 수 있습니까?

제 경우에는 비활성화된 버튼 요소(Vuetify를 통해)에서 이 작업을 수행하려고 했지만 분명히 Chrome은 필요한 이벤트를 실행하지 않으며 요소는 이벤트를 포착하기 위해 div 또는 이와 유사한 것으로 래핑되어야 합니다.

안녕하세요.
이렇게 하려고 했는데 잘 안되네요.

// not working
v-on="{ [condition ? 'click.stop' : 'click'] : eventfunc }"
// or
// error
v-on="{ condition ? 'click.stop' : 'click' : eventfunc }"

다른 해결책이 있습니까?
미리 감사드립니다!

다음은 기본 이벤트에 대한 트릭입니다(Vue v2.6.11 사용).

@mouseenter.native="condition && handler($event)"

<div @[event]="handler" />

@Justineo 이 구문이 Vue에 추가되었습니까?
작동할 수 없습니다. 자세한 내용을 읽을 수 있는 문서 링크를 보내 주시겠습니까?

@proArtex 감사합니다. 저에게도 효과적입니다!
@keyup.delete="title.length === 0 && cancelTopicCreation()"

질문은.... 왜요?

@AndrewBogdanovTSS 는 이 바이올린 https://jsfiddle.net/pbastowski/v0wt5qpo/27/를 살펴보십시오.

구문은 일반 및 기본 클릭에 대해 잘 작동합니다. .native 이벤트는 Vue 구성 요소에서만 사용할 수 있으며 일반 HTML 요소에서는 사용할 수 없습니다.

@pbastowski 간단한 문자열이 작동하고 있지만 필요한 것은 일부 반응 데이터를 기반으로 이벤트 값을 해결할 수 있는 것이므로 다음과 같은 것이 필요합니다.

<h2 @[() => someProp ? 'mouseup' : null]="alert('Normal click on an HTML element')">H2 Element - click it</h2>

그런 구문은 저에게 적합하지 않습니다.

@AndrewBogdanovTSS 논리를 계산된 것으로 이동하기만 하면 여기에서 업데이트된 예를 참조 하십시오.