B.TIL 12 : V-model.lazy

Vue를 사용하다보면 정말 많이 쓰이는게 input 태그와 같이 양방향 바인딩으로 활용되는 v-model입니다.
이런 v-model에는 함께 사용할 수 있는 옵션이 있습니다. 그 중 v-model.lazy에 대하여 알아보도록 합시다.

Vue.js 한국어 공식홈에 나와있는 .lazy옵션 설명

.lazy
기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 합니다. (단 앞에서 설명한 IME 구성은 제외됩니다.) .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다.

입력을 할 때 데이터와 동기화를 하는데 동기화를 무조건 'change 이벤트' 이후에 시켜준다가 핵심입니다.
"아니 이걸 어따 쓰는데?"라는 생각이 드실까봐 예제를 들고왔습니다.

다음은 keyboard이벤트를 통해 숫자만 필터링해주는 HTML 인풋 태그와 메서드입니다.

<template>
  <div id="test">
    <div class="input-box">
      원가
      <input 
        type="tel" 
        @keyup="onlyNumber"
        placeholder="원가" 
        maxlength="6"
        v-model='productOriginPrice'>
    </div>
  </div>
</template>

export default {
  name : 'Sample',
  data () {
    return {
      productOriginPrice : '',
    }
  },
  // 8(백스페이스) , 46(딜리트), 37(좌측화살표), 39(우측화살표)
  methods : {
    onlyNumber : function (event) {
      event = event || window.event
      let keyID = event.which ? event.which : event.keyCode
      if (keyID === 8 || keyID === 46 || keyID === 37 || keyID === 39) {
      } else {
        event.target.value = event.target.value.replace(/[^0-9]/g, '')
      }
    }
  }
} 

글 수정에 필요한 삭제와 좌우측키만 제외하고는 키 입력후에 정규식을 통해 숫자가 아닌 친구들은 모조리 없애주는 메서드입니다. 다만 이 메서드에는 한가지 문제가 있습니다.

보이시나요?
입력시엔 분명히 잘 지워지는것 같은데 이게 왠 걸, 끝나고 나니 문자가 그대로 남아있습니다.
event가 제대로 처리되지않고 키보드로 input된 데이터에 그대로 반영되기 때문에 나타나는 문제입니다.

그럼 앞에 있던 v-model='productOriginPrice'를 v-model.lazy='productOriginPrice'
로 바꿔봅시다.

lazy 옵션을 통해 이벤트를 통해 필터링된 숫자만 깔끔하게 남기는걸 볼 수 있습니다.