Language/Vue.js
[Vue] watcher로 데이터 감시하는 법
JJcoding
2024. 5. 5. 19:42
지난 시간에 만들었던 input에 사용자가 숫자가 아닌 문자를 입력할 경우 제재를 가하는 코드를 짜보자.
input에 문자를 입력하면 경고문을 띄우고 싶다 -> watcher를 사용하면 된다. (데이터를 감시하는 친구)
<script>
export default {
data() {
return {
month : 1,
}
},
watch : {
month() {
}
},
}
</script>
--> watch : { 감시할데이터(){} } / 감시할데이터가 변할 때 마다 안에 있는 코드가 계속 실행된다.
함수 이름은 위에 있는 데이터 이름으로 만들어야 한다.
watch : {
month(a) {
if(a>13) {
alert('13이상 입력하지마!');
}
}
},
--> 사용자가 입력한 값이 13 이상이면 안내문을 띄우는 코드
결과물
문자를 입력 못하게 하려면?
watch : {
month(a) {
if(isNaN(a)) {
alert('문자를 입력하지 마십시오');
this.month = 1;
}
}
},
--> inNaN() 함수를 사용하여 문자가 들어오면 알람이 뜨도록 설정하기
그 밖에 이메일 형식이 맞는지, 패스워드에 대문자가 있는지 등 input 에 입력하는 데이터는 검사가 많이 필요한데,
Vue 전용 form validation 라이브러리 같은 것도 있으니 설치하여 적절하게 사용하면 좋다!
출처 : 코딩애플