Vue: सशर्त घटना बाध्यकारी

@asiFarran

अभी, मुझे ईवेंट सब्सक्रिप्शन बनाना होगा और हैंडलर में शर्त जोड़नी होगी (या इस मामले में इसके लिए भी कोई ज़रूरत नहीं है क्योंकि ईवेंट कभी भी आग नहीं लगेंगे)

वास्तव में एक और आसान तरीका है कि आप इस मामले को कैसे संभाल सकते हैं। आप अपने श्रोता वस्तु के साथ गणना की गई संपत्ति को पास कर सकते हैं (या शर्त पूरी नहीं होने पर शून्य) v-on , उदाहरण के लिए: https://jsfiddle.net/c0Le92xe/

शायद आपको चाहिए?
<div @mouseover="e => condition && handler(e)" />

@ किंगवेल जो अभी भी श्रोता जोड़ता है, जिसे ओपी टालना चाहता है।

@sqal का सुझाव वास्तव में एक वैध समाधान है, और इसे सरल बनाया जा सकता है:

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

हां, @sqal का समाधान अच्छा है और @yyx990803 शो जैसे इनलाइनिंग के साथ मेरे मन में जो कुछ था, उसके काफी करीब है। धन्यवाद!

यह मुझे एक गहरे मुद्दे की ओर ले जाता है, हालांकि: यदि कोई रिबाइंड होता है (डेटा परिवर्तन) और मूल्यांकन पर स्थिति बदल जाती है (या अधिक आम तौर पर यदि ईवेंट स्पेक ऑब्जेक्ट वी-ऑन को पास किया जाता है), तो मौजूदा ईवेंट सब्सक्रिप्शन साफ़ नहीं होते हैं। वे अभी भी (उम्मीद है) घटक के जीवनचक्र के अंत में निपटाए जाएंगे, लेकिन तब नहीं जब वे 'चाहिए' जो तब होता है जब वी-ऑन रिबाइंड होता है।

यह एक किनारे का मामला हो सकता है जिसका अधिकांश परिदृश्यों पर बड़ा प्रभाव नहीं पड़ता है बल्कि केवल संदर्भ के लिए होता है:

मेरे परिदृश्य में मेरे पास एक जटिल एसवीजी है और कुछ तर्क के आधार पर विशिष्ट तत्वों के लिए माउस ओवर/आउट हैंडलर संलग्न करने की आवश्यकता है (वैकल्पिक रूप से)।
घटक एक लंबे समय तक जीवित रहने वाला है और अंतर्निहित डेटा में परिवर्तन होता है, जहां मुझे प्रत्येक रिबाइंड पर अलग-अलग तत्वों के लिए ईवेंट हैंडलर संलग्न करने की आवश्यकता होती है - इसलिए मुझे पिछले सब्सक्रिप्शन का निपटान करने की आवश्यकता होती है ताकि वे अनाथ और उदास न हों और पीएं याद।

एक सामान्य समाधान - और मैं जो करने जा रहा हूं - वह है एक 'शीर्ष स्तर' ईवेंट श्रोता (प्रति ईवेंट प्रकार) सेट करना और ईवेंट को उस पर बुलबुला बनाना, लेकिन इसे पहले Vue तरीके से आज़माने के लिए मेरी प्रेरणा को समझाने के लिए , मेरे हैंडलर्स में काफी कुछ प्रोसेसिंग होनी है, जिसका मैंने पूर्व-गणना करने और इवेंट सब्सक्रिप्शन में ही बेक करने का इरादा किया था, ताकि हैंडलर्स के पास करने के लिए कम (तेज और अधिक तरल प्रतिक्रिया) हो और उन्हें इनवॉइस नहीं किया जाता है सभी उन तत्वों के लिए जिन्हें इसकी आवश्यकता नहीं है (जैसा कि हैंडलर में डीओएम प्रश्नों पर निर्भर इसे फ़िल्टर करने के विपरीत)।

@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 क्या आप देखने के लिए कोडसैंडबॉक्स लिंक प्रदान कर सकते हैं?

मेरे मामले में, मैं इसे अक्षम बटन तत्व (Vuetify के माध्यम से) पर करने की कोशिश कर रहा था, लेकिन स्पष्ट रूप से क्रोम आवश्यक घटनाओं को आग नहीं लगाता है, और तत्व को एक 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 बस अपने तर्क को एक गणना में ले जाएं, यहां अद्यतन उदाहरण देखें https://jsfiddle.net/pbastowski/v0wt5qpo/63/