프레임워크/Vue

[Vue] 데이터 감시 : watcher

은돌1113 2024. 4. 24. 23:28
 

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

React에서 input을 사용할 때는 onChange()라는 이벤트 핸들러를 사용하는 것처럼,Vue에서는 input을 사용할 때 @input or @change를 사용할 수 있습니다. (@input = v-on:input) 🆚 차이점@input (= v-on:input): input 무

eundol1113.tistory.com

 

이전에 작성했던 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>