[vue.js] Vue @click 이벤트 핸들러에 매개 변수를 전달하는 방법

Program / 글쓴이

Vue.js를 사용하여 테이블을 만들고 있으며 onClick통과하는 각 행에 대한 이벤트 를 정의하고 싶습니다 contactID. 다음은 코드입니다.

<tr v-for="item in items" class="static"
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="addToCount('{item.contactID}')"
>
    <td>{{item.contactName}}</td>
    <td>{{item.recipient}}</td>
</tr>

행을 클릭하면을 호출하여 addToCount()작동합니다. 내가 전달하려는 item.contactID에 addToCount(). 누군가이 올바른 구문을 제안 할 수 있습니까?

답변

Vue 지시문을 사용하는 경우 표현식은 Vue 컨텍스트에서 평가되므로 {}.

@clickv-on:click지시어의 약어 이므로 동일한 규칙이 적용됩니다.

귀하의 경우에는 간단히 @click="addToCount(item.contactID)"

답변

일반적인 자바 스크립트 표현식을 사용하면됩니다 {}.

@click="addToCount(item.contactID)"

이벤트 객체도 필요한 경우 :

@click="addToCount(item.contactID, $event)"

답변

나는 같은 문제가 있었고 여기에 내가 통과하는 방법이 있습니다.

귀하의 경우에는 addToCount()전화가 있습니다. 이제 사용자가 클릭 할 때 매개 변수를 전달하려면 다음과 같이 말할 수 있습니다.@click="addToCount(item.contactID)"

함수 구현에서 다음과 같은 매개 변수를받을 수 있습니다.

addToCount(paramContactID){
 // the paramContactID contains the value you passed into the function when you called it
 // you can do what you want to do with the paramContactID in here!

}

답변