Vue.js में वी-ऑन पर पासिंग इवेंट और तर्क

Question

मैं v-on:inputनिर्देशों में एक पैरामीटर पास करता हूं । यदि मैं इसे पास नहीं करता हूं, तो मैं इस कार्यक्रम को विधि में एक्सेस कर सकता हूं। क्या कोई तरीका है जब मैं फ़ंक्शन को पैरामीटर पास करते समय भी घटना को एक्सेस कर सकता हूं। ऐसा नहीं है कि मैं वी-राउटर का उपयोग कर रहा हूं:

यह पैरामीटर पारित किए बिना है। मैं ईवेंट ऑब्जेक्ट तक पहुंच सकता हूं

एचटीएमएल

<input type="number" v-on:input="addToCart" min="0" placeholder="0">

जावास्क्रिप्ट

  methods: {
    addToCart: function (event) {

      // I need to access the element by using event.target
      console.log('In addToCart')
      console.log(event.target)
    }
  }

यह पैरामीटर पारित करते समय है। मैं इवेंट ऑब्जेक्ट तक नहीं पहुँच सकता

एचटीएमएल

<input type="number" v-on:input="addToCart(ticket.id)" min="0" placeholder="0">

जावास्क्रिप्ट

  methods: {
    addToCart: function (id) {

      // How can I access the element by using event
      console.log('In addToCart')
      console.log(id)
    }
  }

यहाँ कोड का कुछ स्निपेट है, जो मुझे हो रही समस्या को दोहराने के लिए पर्याप्त होना चाहिए

https://jsfiddle.net/lookman/vdhwkrmq/

Answer 1

यदि आप ईवेंट ऑब्जेक्ट के साथ-साथ डेटा पास करना चाहते हैं, तो आपको पास करना होगा eventऔर ticket.idदोनों पैरामीटर, जैसे निम्नलिखित हैं:

एचटीएमएल

<input type="number" v-on:input="addToCart($event, ticket.id)" min="0" placeholder="0">

जावास्क्रिप्ट

methods: {
  addToCart: function (event, id) {
    // use event here as well as id
    console.log('In addToCart')
    console.log(id)
  }
}

काम की बेला देखें: https://jsfiddle.net/nee5nszL/

संपादित: वाउ-राउटर के साथ मामला

यदि आप वी-राउटर का उपयोग कर रहे हैं, तो आपको अपनी पद्धति में $ घटना का उपयोग करना पड़ सकता है v-on:inputजैसे:

<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">

यहाँ काम कर रहा है बेला ।

Comments

मैंने कोशिश की, लेकिन मुझे त्रुटि संदेश मिलाProperty or method "event" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

— जेकॉब

@geckob आपने HTML से ईवेंट पारित किया है v-on:input:?

— सौरभ

यकीन नहीं है कि यह संबंधित है या नहीं, लेकिन मैं

— वी

@ सौरभ @geckob त्रुटि से बचने के लिए, आपको विशेष $eventकॉल को मेथड कॉल के लिए पास करना होगाv-on:input="addToCart($event, num)"

— williamukoh

आपको पास होना चाहिए $event, नहींevent

— माइकल ट्रेंचिडा

Answer 2

आप भी कुछ ऐसा कर सकते हैं ...

<input @input="myHandler('foo', 'bar', ...arguments)">

Evan आपने स्वयं Vue फोरम पर एक पोस्ट में इस तकनीक की सिफारिश की थी। सामान्य तौर पर कुछ घटनाओं में एक से अधिक तर्क हो सकते हैं। साथ ही प्रलेखन के अनुसार आंतरिक चर $ घटना मूल डोम घटना को पारित करने के लिए है।

Comments

jsfiddle.net/50wL7mdz/30115 * .vue घटकों का उपयोग करते समय ध्यान दें कि फैला हुआ सिंटैक्स ट्रांसप्लैड किया जाएगा, लेकिन यदि आप इन-ब्राउज़र संकलन का उपयोग नहीं करते हैं।

— Илья Иеленько

"... तर्कों" और "$ घटना" के बीच अंतर है?

— राफेल

@ राफेल एक अंतर है! "$ घटना" तर्क के साथ आप घटना से केवल एक तर्क पास करते हैं।

— पियोत्र दाविदुक

Answer 3

विशेष रूप से कस्टम इवेंट हैंडलर के लिए आपको क्या तर्क देने की ज़रूरत है, इसके आधार पर, आप कुछ इस तरह कर सकते हैं:

<div @customEvent='(arg1) => myCallback(arg1, arg2)'>Hello!</div>