본문 바로가기

데일리 공부 기록

hands on vue3 - 조심하라 ref로 받으면 Number타입이 아니다!

728x90

[목표]

1. input type=number 에서 v-model과 ref로 받을 때의 차이점을 알아보자

2. 콘솔에 나타나는 Number 와 String의 차이점을 살펴보자

3. v-model의 숨겨진 v-model.number, v-model.trim 에 대해서 알아보자


input type=number 에서 v-model과 ref로 받을 때의 차이점을 알아보자
    <div class="form-control">
      <label for="age">Your Age (Years)</label>
      <input id="age" name="age" type="number" v-model="inputAge" ref="userAge"/>
    </div>

타입은 Number

v-model, ref 각각 변수에 할당했다. 

 

console에 찍어보자

<script>
  export default{
    data(){
      return{
        inputName: '',
        inputAge: 0,
      };
    },
    methods: {
      submitData(){
        console.log(this.inputName);
        console.log(this.inputAge);
        console.log(this.$refs.userAge.value);
        this.inputName = '';
      }
    }
  }
</script>

콘솔에 숫자는 파란색

문자는 검정색으로 나온다.

 

type이 number임에도

ref로 가져온 값은 String이다. 

 

조심해야한다.

 

확실한 확인을 위해

숫자를 더해본다.

 

<script>
  export default{
    data(){
      return{
        inputName: '',
        inputAge: 0,
      };
    },
    methods: {
      submitData(){
        console.log(this.inputName);
        console.log(this.inputAge + 10);
        console.log(this.$refs.userAge.value + 10);
        this.inputName = '';
      }
    }
  }
</script>

v-model은 29 + 10 = 39가 되었고

ref는 29 + 10 = 2910이 되었다

 


v-model의 숨겨진 v-model.number, v-model.trim 에 대해서 알아보자

 

v-model.number => 숫자 타입 변환

v-model.trim => 받은 문자 앞  뒤 공백을 없애줌