Tenemos en nuestro proyecto basado en Vue.js la biblioteca de componentes. Uno de ellos es el componente <v-text-input> personalizado. Ese componente extiende (envuelve) el componente <input> estándar: puede escribir lo que quiera y hay algunas características adicionales.

Lo único que me gusta cambiar es hacer que nuestro componente personalizado sea "solo dígitos", es decir, permitir ingresar números (0-9) solo, pero ese debería ser un componente nuevo, por ejemplo <v-digits-input> . Pienso en usar:

onkeypress="return event.charCode >= 48 && event.charCode <= 57"

Pero, no estoy seguro de cómo implementarlo de manera eficiente.

El código se ve de la siguiente manera:

v-text-input.vue:

 <template> <div class="v-text-input" :class="rootClasses"> <div v-click-outside="unfocus" class="v-text-input-control" @click="focus"> <div class="v-text-input-control-inner"> <div v-if="iconPrepend" class="v-text-input__icon v-text-input__icon--prepend"> ... </div> <div class="v-text-input-control-inner"> <label>...</label> <input :id="id" ref="input" type="text" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" v-bind="$attrs" :value="mutableValue" v-on="listeners" /> </div> <slot name="icon"> <div v-if="iconAppend" class="v-text-input__icon v-text-input__icon--append"> ... </div> </slot> </div> </div> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Watch, Model } from 'vue-property-decorator'; @Component({ inheritAttrs: false }) export default class TextInputComponent extends Vue { ... }

v-dígitos-entrada.vue:

 <template> <v-text-input v-bind="$attrs" v-on="$listeners" onkeypress="return event.charCode >= 48 && event.charCode <= 57" /> </template> <script lang="ts"> import { Vue, Component } from 'vue-property-decorator'; @Component({ inheritAttrs: false }) export default class TextInputComponent extends Vue {} </script>

No estoy seguro de si este es el enfoque correcto.