การส่งเหตุการณ์และอาร์กิวเมนต์ไปที่ v-on ใน Vue.js

ฉันผ่านพารามิเตอร์ในv-on:inputคำสั่ง ถ้าฉันไม่ผ่านมันฉันสามารถเข้าถึงเหตุการณ์ในวิธีการ มีวิธีใดบ้างที่ฉันยังสามารถเข้าถึงเหตุการณ์เมื่อส่งพารามิเตอร์ไปยังฟังก์ชัน ไม่ใช่ว่าฉันใช้ vue-router:

นี่คือโดยไม่ต้องผ่านพารามิเตอร์ ฉันสามารถเข้าถึงวัตถุเหตุการณ์

HTML

<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)
    }
  }

นี่คือเมื่อผ่านพารามิเตอร์ ฉันไม่สามารถเข้าถึงวัตถุเหตุการณ์

HTML

<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/

หากคุณต้องการเข้าถึงวัตถุเหตุการณ์เช่นเดียวกับข้อมูลที่ส่งผ่านคุณต้องผ่านeventและticket.idทั้งสองเป็นพารามิเตอร์ดังต่อไปนี้:

HTML

<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/

แก้ไข: เคสด้วย vue-router

ในกรณีที่คุณใช้ vue-router คุณอาจต้องใช้$ event ในv-on:inputวิธีการของคุณดังนี้:

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

นี่คือการทำงานซอ

คุณสามารถทำอะไรเช่นนี้ ...

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

Evan คุณแนะนำเทคนิคนี้ในกระทู้เดียวบนฟอรัม Vue โดยทั่วไปเหตุการณ์บางอย่างอาจส่งเสียงมากกว่าหนึ่งอาร์กิวเมนต์ นอกจากนี้เอกสารอธิบายสถานะตัวแปรภายใน $ event มีไว้เพื่อส่งเหตุการณ์ DOM ดั้งเดิม

ขึ้นอยู่กับอาร์กิวเมนต์ที่คุณต้องผ่านโดยเฉพาะอย่างยิ่งสำหรับตัวจัดการเหตุการณ์ที่กำหนดเองคุณสามารถทำสิ่งนี้:

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