안녕하세요 선생님! 항상 강의 잘 보고 있습니다.
watcher 강의를 듣고 나서 평소처럼 숙제를 하고 있었는데 궁금한 점이 생겨서 글을 작성하게 되었습니다.
제가 작성한 코드는 아래와 같습니다.
<template>
<input type="text" v-model.number="month">
<p> {{month}}개월 선택함 : {{ 원룸들[누른거].price * month}}</p>
</template>
<script>
<span style="color: #ff6600;"><span style="color: #800080;">export defaul<span style="color: #800080;">t</span></span></span> {
name: 'ModalItem',
props: {
원룸들: Array,
누른거: Number,
모달창열렸니: Boolean,
},
data () {
return {
month: 1,
}
},
methods: {
closeModal(){
this.$emit('모달창닫기')
}
},
watch: {
month(a){
// 사용자가 month를 글자로 입력하면 경고문 띄어주고 month의 초기값을 1로 바꿔주세요
const str = /\s/g;
if(isNaN(a) == true) {
alert('숫자만 입력해주세요.')
this.month = 1
} else if (a.match(str)) {
alert('숫자만 입력해주세요.')
this.month = 1
}
}
}
}
</script>
1. 선생님께서 watch에 inNaN을 넣으셨지만 저는 처음에 typeof(a) == 'string' 을 넣었는데 이게 처음 초기값인 1을 지우기만 해도
alert창이 뜨던데 그 이유가 궁금합니다.
이미 v-model에 number만 들어간다고 명시를 해놓았는데 공백도 문자열로 잡혀서 그런걸까요?
그리고 무엇보다 typeof을 썼을 때, alert창은 뜨는데 month의 초기값이 1로 설정이 안되더라구요..
숫자만 넣었을 때에도 계산이 안됩니다ㅜㅜ
typeof을 처음부터하면 안되는거였을까요..?
2. 숙제내주신 부분을 활용해서 스페이스를 입력할 시에 alert가 뜨고 초기값을 1로 설정하도록 코드를 작성해보았는데
위처럼 코드를 작성할 시에 두 케이스 다 alert창은 표시가 되는데 month값이 초기화가 안됩니다ㅜㅜ
그리고 숫자만 입력했음에도 월세 계산이 되지 않습니당... 무슨 문제가 있는 걸까요?? 답변 주시면 감사하겠습니다!!
