Vue.js 알게된 점 두 번째.

<input v-model="month" @input="handleInput">

 

이렇게 해놓으면 month 변수가 기본적으로 String형으로 인식된다.

 

그래서 

 

handleInput() {

   console.log(this.month + 2);

    console.log(this.month * 2);

}

 

를 실행하면 month가 12라고 가정했을 때 위에서부터

 

122

24

 

이렇게 출력된다.

 

즉, v-model은 입력된 값이 숫자여도 기본으로 String으로 인식한다.

 

따라서 

 

console.log(parseInt(this.month) + 2);

 

이렇게 해줘도 되지만...

 

<input v-model.number="month">

 

요래주면 month로 들어오는 값을 저절로 Number형으로 변환해준다.

 

아니면 <input v-model.number="month" type="number">

 

이래줘도 될것같다.

 

 

또 알게된 사실은

 

watch에서 data변수를 감지하는 함수에 인자를 넣어줄 수 있다.

 

물론 Vue.js에서 기본으로 제공하는 기능이다.

 

month(a, b) {

    console.log(a, b);

}

 

이러면 a에는 바뀐 후의 현재 month값이 출력되고

 

b에는 변경 전의 값이 출력된다.