Vue.js에서 이벤트 및 인수를 v-on에 전달

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>