[Vue] 데이터 감시 : watcher

[Vue] input에서 사용자가 입력한 값 받는 방법 (@input, @change, v-model)

 

이전에 작성했던 input 태그를 보면 number라는 data에 값을 입력받는 데

특정 사용자가 Number 타입의 값이 아닌 String 값을 입력한다면 관련 기능에서 오류가 발생할 수 있는 데

이 경우 watcher()라는 함수를 사용하여 데이터를 감시할 수 있다.

---

1️⃣ isNaN을 사용하는 방법

: isNaN은 입력된 값이 숫자인 지 문자열인 지 체크하여 true, false를 반환해 준다. 이 경우 파라미터로 받은 value는 모두 String 타입이기 때문에 isNaN에서 숫자면 true, 문자열이면 false를 반환한다.

2️⃣ typeof를 사용하는 방법

: 파라미터로 받은 value의 타입을 반환하기 때문에 이 경우에는 typeof(value) > 0 ? true : false로 반환하여 조건식을 써줘야 할 것 같다. (이 예제에서는 적합하지 않은 것 같음)

3️⃣ v-model.number를 사용하는 방법

: 숫자, 문자 모두 입력 가능하지만 watcher()에서는 숫자만 콘솔에 찍히는 걸 알 수 있는 데 이 경우 문자가 입력되면 Vue가 내부적으로 입력값을 Number 타입으로 변환하기 때문에 외관상에는 문자열이 보이지만 내부적으로는 NaN(숫자 아님)이 저장된다고 합니다.

---

🖥️ 문법

1️⃣ script 부분에 watch를 추가한다.

2️⃣ watch 내부에 감시하려는 데이터의 이름을 사용한 함수를 생성한다. (파라미터에는 사용자가 입력한 값 = value가 넘어온다)

3️⃣ 해당 함수는 input에 값이 변경될 때마다 실행되며 내부에 관련 코드를 작성하면 된다.

<template>
  <input v-model="number" placeholder="숫자를 입력해주세요" />
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      number: 1,
    };
  },
  watch: {
    number(value) {
      if (isNaN(value)) {
        alert("숫자만 입력해주세요.");
        this.months = 1;
        return;
      }
    },
  },
};
</script>

<style>
</style>