Vue.js의 지시어를 사용하여 숫자 값만 수락하는 입력 필드

Vue.js의 지시어를 사용하여 숫자 값만 수락하는 입력 필드

나는 Vue.js에 처음 와.숫자만 사용할 수 있는 입력 필드를 원하며, 사용자가 다른 값을 입력하면 빈 문자열로 대체된다.따라서 이 필드 viz 'numericOnly'에 사용자 지정 지시어를 추가하고자 한다.

사용자 지정 지시어 코드:

Vue.directive('numericOnly', {
  bind (el, binding, vnode) {
    regex = /^[0-9]*$/
    if(!regex.test(el.value)){
     el.value = el.value.slice(0, -1)
    }
  }
})

여기 내 템플릿이 있다.

<input v-numericOnly name="mobileNumber" placeholder="Mobile Number" >

그러나 입력 필드가 DOM에 바인딩되어 있는 한 번만 실행된다.

이 문제를 해결하는 것을 도와줘.미리 고맙다.

당신의 지시는 경청해야 한다.keyup필요한 사항을 달성할 수 있는 입력 요소:

Vue.directive('numericOnly', {
  bind(el) {
    el.addEventListener('keyup', () => {
      let regex = /^[0-9]*$/
      if (!regex.test(el.value)) {
        el.value = el.value.slice(0, -1)
      }
    })
  }
})

import Vue from 'vue'    
Vue.directive('numericOnly', {
bind(el, binding, vnode) {
    el.addEventListener('keydown', (e) => {
        if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && e.ctrlKey === true) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && e.ctrlKey === true) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && e.ctrlKey === true) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault()
        }
    })
}

})

참조URL: https://stackoverflow.com/questions/48700683/input-field-only-accepting-numeric-value-using-directive-in-vue-js