출처 바로가기(영문)

Vue.js: v-on:click을 사용해 해당 요소(element)의 DOM 가져오기

 

이벤트 객체 $event를 사용하여 이벤트 핸들러를 가져올 수 있습니다.

<div id="foo" v-on:click="select($event)">...</div>

 

$event는 자바스크립트에서 다음과 같이 처리할 수 있습니다. 참고로 event 자체는 클릭 이벤트이고, 어떤 요소를 클릭했는지 가져오는 것이 event.currentTarget(또는 event.target)입니다.

export default {
    methods: {
        select: function(event) {
            const targetId = event.currentTarget.id;
            console.log(targetId); // returns 'foo'
        }
    }
}

 

첫 번째 코드는 다음과 같이 줄여쓸 수 있습니다. v-on:click@click으로 줄일 수 있고, select의 파라미터를 생략하면 자동으로 이벤트 객체를 넘겨줍니다.

<div id="foo" @click="select">...</div>

 

단, 위의 경우 파라미터가 1개인 경우만 사용할 수 있습니다. 파라미터가 여러 개라면 아래와 같이 사용하세요.

<div id="foo" @click="select(bar, $event)">...</div>
export default {
    methods: {
        select: function(bar, event) {
            // use bar...

            const targetId = event.currentTarget.id;
            console.log(targetId); // returns 'foo'
        }
    }
}

문의 | 코멘트 또는 ayaysir0@naver.com

donaricano-btn
카테고리: WEB: FrontendVue.js

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다