vue.js의 v-on에 이벤트 및 인수 전달

vue.js의 v-on에 이벤트 및 인수 전달

매개 변수를 전달한다.v-on:input지시 사항통과하지 못하면 메소드로 이벤트에 접속할 수 있다.매개변수를 함수에 전달할 때 이벤트에 계속 액세스할 수 있는 방법이 있는가?나는 vue-roouter를 사용하고 있다는 점에 유의한다.

이것은 파라미터를 통과하지 못한 것이다.이벤트 개체에 액세스할 수 있는 위치:

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

working fiddle: https://jsfiddle.net/nee5nszL/을 참조하십시오.

편집됨: vue-roouter가 있는 대소문자

부에루터를 사용하는 경우 $이벤트를 사용해야 할 수 있다.v-on:input다음과 같은 방법:

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

여기 일하는 사람이 있다.

이런 것도 할 수 있고...

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

에반 유 자신이 이 기술을 Vue 포럼의 한 게시물에서 추천했다.일반적으로 어떤 사건들은 둘 이상의 논쟁을 불러일으킬 수 있다.또한 문서에 따르면 내부 변수 $이벤트는 원래 DOM 이벤트 통과를 위한 것이다.

특히 사용자 지정 이벤트 핸들러에 대해 전달해야 하는 인수에 따라 다음과 같은 작업을 수행할 수 있다.

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

익명의 콜백 기능을 사용하여 이벤트와 매개 변수를 모두 전달할 수 있기 때문에 매개 변수를 전달하는 방식이 좋다.

<button v-on:click="(e)=>deleteHandler(e, args1)" > Click me </button>

참조URL: https://stackoverflow.com/questions/40956671/passing-event-and-argument-to-v-on-in-vue-js