如何阻止在Vue V-validate表单的纯数字输入中键入字符和字母

<template>
  <input v-model="inputValue" v-on:keypress="validateInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    validateInput(event) {
      const charCode = event.which ? event.which : event.keyCode;
      if (charCode < 48 || charCode > 57) {
        event.preventDefault();
      }
    }
  }
};
</script>

<template>
  <input v-model="inputValue" v-validate="'numeric'" />
</template>

<script>
import { ValidationProvider, extend } from 'vee-validate';
import { required, numeric } from 'vee-validate/dist/rules';

extend('numeric', {
  ...numeric,
  message: '请输入纯数字'
});

export default {
  components: {
    ValidationProvider
  },
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

<template>
  <input v-model="inputValue" v-on:input="validateInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    validateInput() {
      this.inputValue = this.inputValue.replace(/[^0-9]/g, '');
    }
  }
};
</script>