[Vue] 데이터 감시 watcher

watcher

데이터를 감시하는 함수
데이터가 제대로 들어왔는지 검사한다, 특히 사용자의 input을 받는 페이지에서는 필수적이다.

문법

<script>
export default {
  name: 'ModalDetail',
  data(){
    return {
      month: 1,
    }
  },
  watch: {
    month(a, b){  // 감시할 데이터 이름으로 함수를 만든다. (a:변경후 데이터, b:변경 전 데이터)
      if(a >= 13){
        alert("경고");
        this.month=a;
      }
    }
  },
}
</script>

month 라는 데이터가 변경될 때마다 watch 안의 month 함수가 실행된다.

• 파라미터 a : 변경 후 데이터
• 파리미터 b : 변경 전 데이터

문자 입력받을 시 경고하기

<script>
// ...
watch: {
  month(a, b){  // 감시할 데이터 이름으로 함수를 만든다. (a:변경후 데이터, b:변경 전 데이터)
    if (a >= 13) {
      alert("경고");
      this.month=b;
    }
    if (isNaN(a)) {
      alert("문자 입력 금지");
      this.month=b;
    }
  }
},
//...
</script>

자바스크립트로 숫자인지 아닌지 판단하는 방법은
isNaN(데이터), typeof(데이터)