Vue 데이터를 감시하고 싶을 땐 watcher

 <input>에 숫자로 입력 받고 싶을 땐 v-model.number="데이터이름" 으로 작성하면
num 숫자자료형으로 바꿔서 저장된다. 

 

누군가가 <input>에 문자를 넣는걸 막으려면  watcher를 쓰면 된다.

watcher 는 데이터를 감시하면서 특정 데이터가 변경될 때마다 실행되는 코드 이다.

 

코드를 적용해 보겠다.

data에 month 데이터를 감시하고 싶으면 watch안에 함수명을 감시할 데이터이름으로 만들어준다.

export default {
  data(){
    return {
      month : 1
    }
  },
  watch : {
    month(){
      //사용자가 month를 문자로 입력하면 alert 띄우기
    }
  }
}

 

watch 함수안에 month 데이터가 변할 때마다 실행하고 싶은 코드를 적어준다.

export default {
  data(){
    return {
      month : 1
    }
  },
 watch : {
     month(새로운값, 이전값) {
        if (isNaN(새로운값)) {
          alert('숫자만 입력 가능합니다.');
          this.month = 이전값;
        }
     }
}

함수 안에는 두개의 파라미터를 부여 할 수 있다. 첫번째는 새로운 값, 두번째 이전 값 데이터가 되며
month 데이터가 변경될 때 마다 함수를 실행하게 된다.

 

추가) 사용자가 month 에 입력한 데이터가 12보다 크면 alert메세지 띄우기

export default {
  data(){
    return {
      month : 1
    }
  },
 watch : {
  month(a) {
  //사용자가 month에 입력한데이터가 12보다 크면 alert 띄우기
  if (a>12 ) {
   alert('12 이상 입력하지 마세요');
  }
 }
}