watcher로 데이터 감시

input태그를 쓸 때, number로 초기값을 정했는데, string으로 넣을 때, 제한을 할 수 있다.

이럴 때, watcher를 사용하는데, watcher은 데이터를 감시하는 함수이다.

data(){
      return {
        month : 1,
      }
},
watch : {
      month() {
        
      }
},

이렇게, data에 month라는 데이터를 감시하고 싶으면 watch안에 감시할 데이터 이름으로 함수를 만들어주면 된다.

감시라는건, month라는 데이터가 변할 때마다 위의 month함수의 코드가 실행된다는걸 뜻한다.

 

그래서 month()함수 안에 코드를 작성해보면

watch : {
      month(a,b) {//a는 변경 후 데이터, b는 변경 전 데이터
        if (isNaN(a)==true) {
          alert('문자 입력 금지');
          this.month = 1;
        }
      }
},

이런 식으로, 함수 안에는 두개의 파라미터를 줄 수 있고, 그 첫번째 파라미턴 변경 후, 두번째 파라미턴 변경 전 데이터가 되며, month라는 데이터가 바뀔 때 마다 안에 있는 함수를 실행하게 된다.