Vue watcher문법

1. Watcher 문법이란

- 데이터를 감시하는것이 가능합니다.

-  비정상적인 데이터 값, 잘못된 입력값 확인 등

 

- 예시 코드

<template>
  <div class="menu">
    <p>라면</p>
    <input v-model="num" />
    <p> {{ 5000 * num }} 원</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      num: 0
    }
  },
}
</script>

 

2. 잘못된 입력값으로 인하여 NaN 원으로 계산되고 있습니다.

 

3. watch 코드 추가

 watch: {
    num(a) {
      if (isNaN(a) == true) {
        alert('잘못된 입력');
        this.num = 0;
      }
    },
  },