2

Quiero limitar el campo input con un maxlength, he intentando así;

<input class="input" type="number" v-model.number="numero" maxlength="10">

pero vue.js no lo reconoce.

<input class="input" v-model.number="numero" type="number">
2
  • 1
    .length es un propiedad de los datos tipo string no de los datos tipo number. Cuando haces el cast a number, entonces ya no puedes validarlo por longitud, pero podrías hacerlo por valor.
    – toledano
    el 8 abr. 2017 a las 3:53
  • Deberías crear un ejemplo mínimo verificable, consigo ejecutar el código que pones, pero no obtengo el mismo resultado. Aparte, como bien indica @toledano, maxlength es para campos de tipo string y no va a funcionar con números. Podrías usar max y min, pero no sé si eso es lo que buscas. Otra opción sería hacer el campo de tipo texto y ponerle una regla de validación para comprobar que sólo contiene números
    – Alvaro Montoro
    el 8 abr. 2017 a las 4:12

3 respuestas 3

5

El atributo maxlength solo aplica a cajas de texto que almacenan strings, no a números. Tienes algunas opciones, ahora se me ocurren dos maneras: usando una librería de validación y usando un handler para el evento input.

Con una librería como vee-validate es bastante sencillo:

Vue.use(VeeValidate);

new Vue({
  data: () => ({
    numero: null,
  })
}).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.0.0-beta.25/vee-validate.min.js"></script>

<div id="app">
  <input 
    class="input" 
    type="number" 
    v-model.number="numero"
    name="numero"
    v-validate="'required|numeric|max:10'"
  />
  <span v-show="errors.has('numero')">
    {{ errors.first('numero') }}
  </span>
</div>

2

Prueba haciendo algo asi:

Emplear el V-Validator.

O Asi:

<input type="text" name="numero" v-model.number="numero" v-validate:numero="{required: true, maxlength: 15}"/>

Sacado de:

https://blog.midkemia.fr/form-validation-with-vue-js/

Cabe destacar que puse maxlength por inercia. revisando la documentacion de vue.js en ningun lugar aparecia: maxlength, solo minlegth

0

Gracias por sus respuestas, pero lo solucione de la siguiente manera:

<input class="input" onKeyUp="if(this.value>9){this.value='9';}else if(this.value<0){this.value='0';}" v-model.number="numero" type="number">

Lo dejo por si alguien lo llega a ocupar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.