Es una aplicación simple con v-text-field para la entrada. Quiero habilitar la entrada del usuario solo para números, si trato de escribir como 11a y luego presiono el tabulador o hago clic con el mouse fuera de la entrada antes de perder el enfoque, veo 11 , pero luego se pierde el enfoque y veo 11a . No entiendo cómo se restauró el último símbolo y cómo solucionarlo. ¿Qué estoy haciendo mal?
<div id="app"> <h1>{{message}}</h1> <v-text-field @input.native="setOnlyNumber" /> </div> </template> <script> export default { data() { return { message: 'Welcome to Vue!' }; }, methods: { setOnlyNumber(e) { e.target.value = e.target.value.replace(/\D+/, ''); } } }; </script>``` It is my example app on codepen https://codepen.io/aleksandra973/pen/BamYdOOPuede usar type="number" en el elemento <v-text-field> .
Demostración de trabajo:
Vue.use(Vuetify); var vm = new Vue({ el: "#app", data() { return { message: 'Welcome to Vue!' }; } }); <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <h1>{{message}}</h1> <v-text-field type="number" label="Number Input Field"/> </div>Según el comentario del autor, Agregar a continuación un fragmento de código de trabajo que aceptará solo números y alfabetos.
Vue.use(Vuetify); var vm = new Vue({ el: "#app", data() { return { message: 'Welcome to Vue!' }; }, methods: { validateInput(e) { let char = String.fromCharCode(e.keyCode); // Get the character if(/^[0-9A-Za-z]+$/.test(char)) return true; // Match with regex else e.preventDefault(); // If not match, don't add to input text } } }); <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <h1>{{message}}</h1> <v-text-field type="text" label="Number Input Field" v-on:keypress="validateInput($event)"/> </div>La forma más sencilla sería hacer uso de la entrada de tipo Número de HTML5.
v-text-field puede usar este tipo con el siguiente indicador:
<v-text-field type='number' />Alternativamente, puede vincular los datos y ejecutar una validación de la siguiente manera:
<template> <div id="app"> <h1>{{message}}</h1> <v-text-field v-model='number' @change="validate" /> </div> </template> <script> export default { data() { return { message: 'Welcome to Vue!', number: null, }; }, methods: { validate() { this.number = this.number.toString().replace(/\D+/, ''); } } }; </script>