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">
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>
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
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.
.length
es un propiedad de los datos tipostring
no de los datos tiponumber
. Cuando haces el cast a number, entonces ya no puedes validarlo por longitud, pero podrías hacerlo por valor.maxlength
es para campos de tipo string y no va a funcionar con números. Podrías usarmax
ymin
, 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