메서드(Methods)
Vue 컴포넌트의 메서드를 등록하는 객체입니다. 메서드를 등록하는 포멧은 다음과 같습니다.
methods: {
// ES 6+ 문법 (권장)
signUp() {
// ...
}
// 또는 ES 5 문법
login: function() {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
주의!
컴포넌트 메서드 등록 시, 화살표 함수를 사용해서는 안됩니다.
this가 Vue 인스턴스를 참조하지 않기 때문입니다.
methods: {
signUp: () => {
console.log(this === undefined); // true
}
}
1
2
3
4
5
2
3
4
5
이벤트 ↔︎ 메서드 바인딩
컴포넌트에 등록된 메서드를 사용할 경우 이벤트 바인딩 구문을 사용합니다.
<template>
<div class="form-control">
<label>
<input
type="checkbox"
@click="logCheckState($event.target.checked)"
> 체크박스
</label>
</div>
</template>
<script>
export default {
methods: {
logCheckState(checked) {
console.log(checked);
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
참고
보다 자세한 사용법은 메서드 문서를 참고하세요.