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?

— সৌরভ

এটি সম্পর্কিত কিনা তা নিশ্চিত নয়, তবে আমি ভ্যু-রাউটার ব্যবহার করছি এবং এটি

— কোনও একটি পার্টিতে

@ সৌরভ @ জেকোব ত্রুটি এড়াতে আপনাকে $eventপদ্ধতি কলটিতে বিশেষ পরিবর্তনশীলটি পাস করতে হবেv-on:input="addToCart($event, num)"

— উইলিয়ামুকো

আপনার পাস করা উচিত $event, নাevent

— মাইকেল ট্রাঞ্চিদা

Answer 2

আপনি এই জাতীয় কিছু করতে পারেন ...

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

ইভান আপনি নিজেই ভ্যু ফোরামের একটি পোস্টে এই কৌশলটি সুপারিশ করেছিলেন। সাধারণভাবে কিছু ঘটনা একাধিক যুক্তি নির্গত করতে পারে। ডকুমেন্টেশন হিসাবে অভ্যন্তরীণ পরিবর্তনশীল $ ইভেন্টটি মূল ডিওএম ইভেন্টটি পাস করার জন্য বোঝানো হয়েছে।

Comments

jsfiddle.net/50wL7mdz/30115 নোট করুন * .vue উপাদানগুলি ব্যবহার করার সময় স্প্রেড সিনট্যাক্সটি ট্রান্সপ্লাইন্ড করা হবে, তবে আপনি ব্রাউজারে সংকলন ব্যবহার না করে নয়।

— Зеленько

"... যুক্তি" এবং "$ ইভেন্ট" এর মধ্যে পার্থক্য আছে?

— রাফেল

@ রাফেল একটি পার্থক্য আছে! "$ ইভেন্ট" যুক্তি দিয়ে আপনি ইভেন্ট থেকে কেবল একটি যুক্তি পাস করেন argument

— পাইওটার দাউদিউক

Answer 3

বিশেষত কাস্টম ইভেন্ট হ্যান্ডেলারদের জন্য আপনার কী যুক্তিগুলি পাস করতে হবে তার উপর নির্ভর করে আপনি এই জাতীয় কিছু করতে পারেন:

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