[Vue] input에 숫자만 입력 가능하게 하기

예제

---

<template>
  <div>
    <input type="text" @input="bindNumber" :value="number">
  </div>
</template>

<script>

export default {
  data(){
    return{
      number: '',
    }
  },
  methods:{
    bindNumber(event){
      this.number = event.target.value;
    },
  },
  watch: {
    number(val){
      const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/;

      // 한글, 영문 체크
      if(reg.exec(val)!==null) this.number = val.replace(/[^0-9]/g,'');

      // .... 만 입력하게 될 경우 체크
      if(isNaN(parseFloat(val))) this.number = '';
    }
  }
}
</script>

👉 <input type="text" @input="bindNumber" :value="number">

👉 bindNumber(event) { ... }

1. @input로 사용자가 input에 값을 입력 할때 마다 number에 할당한다.
2. event에서 사용자가 입력한 값을 가져올 수 있다.
3. v-model을 사용할 경우 number에 바로 바인딩이 가능하다. 하지만 현재 input이벤트로 bindNumber method를 한번 거친 후 number에 바인딩 한다. 그 이유는 아래에서 확인 가능하다.

 

👉 number(val){ ... }

1. bindNumber method가 실행 되면, number에 값이 할당 되고, watch에서 number을 감지 해서 내부 로직이 실행 된다.

 

👉 const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/

1. 한글, 영어를 감지하는 정규표현식 이다.
2. 정규표현식에 따라 감지하는 값이 달라지기 때문이 “숫자만 입력”이 아닌 다른 조건으로 하고 싶을 경우 정규표현식만 수정 하면 다양하게 응용 가능하다.

 

👉 if(reg.exec(val) !== null) this.number = val.replace(/[^0-9]/g,'')

1. 만약 한글 또는 영어가 값으로 인식 되면 number에 할당된 값을 빈문자열로 만든다.

 

👉 if(isNaN(parseFloat(val))) this.number = ''

1. 위 정규표현식은 실수형도 입력 가능 하다.
2. 하지만 실수형의 . 이 연속으로 들어올 경우 필터 하기 위해서 이다.

 

왜 v-model을 사용하지 않고 @input을 사용하나?

---

For languages that require an IME (Chinese, Japanese, Korean, etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater to these updates as well, use the input event instead.
- vue 공식문서 -

 

Vue 공식문서를 확인 해보면 IME(한국어, 중국어, 일본어) 등 을 작성하는 동안 v-model이 업데이트가 되지 않는다고 한다.

여기서 업데이트가 되지 않는다는건 실시간으로 데이터가 바인딩이 되지 않는다는 의미 이다.

따라서 IME를 작성할려면, input이벤트를 사용하라고 말한다.