He visto un componente en Element UI para administrar la cantidad de elementos, está aquí:
https://element.eleme.io/#/en-US/component/input-number
Me gustaría usar algo así en Vuetify, pero no puedo encontrar un componente similar o incluso un ejemplo de estilo similar en Material Design. ¿Cuál es la mejor manera de lograrlo?
Aquí se mezclan algunos conceptos para la entrada de números.
No puedo ver que type="number" se elimine en 2.2.22 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22 También veo que se representa correctamente al menos en 2.3. 10
El campo de entrada con el tipo de atributo = "número" se manejará de manera diferente según el navegador, el sistema operativo y la configuración regional (por ejemplo, todavía puedo ingresar texto libre en FF pero no en Chrome). Por lo general, la distribución del teclado cambia en los teléfonos inteligentes.
v-model.number es puramente una directiva para Vue. Como puede ver, internamente, Vue simplemente intenta analizar la entrada con parseFloat y la usa si tiene éxito; de lo contrario, será texto y se manejará como una cadena en Vue/JS. https://vuejs.org/v2/guide/forms.html#number
Código Vue Vuetify usando :rules="maxRules"
<template> <div> <v-text-field v-model="text1" :rules="maxRules" label="Credit Amount"></v-text-field> </div> </template> <script> export default { data () { return { limit:500, maxRules: [ (v)=> { if (this.text1 > this.limit) { return 'Error' } } ] } } } </script>Sí hay:
<v-text-field v-model="numberValue" hide-details single-line type="number" />Consulte los documentos del componente deslizante para ver un ejemplo de trabajo.
en vuetify.js v2.2.22 para convertir su <v-text-field> en número, necesita escribir v-model.number
<v-text-field v-model.number="foo" label="Number" append-outer-icon="add" @click:append-outer="increment" prepend-icon="remove" @click:prepend="decrement"> </v-text-field>type="number" fue eliminado
Actualización : esta respuesta pertenece a la versión 1 de Vuetify, la respuesta de yukashima huksay es correcta para las versiones más nuevas de Vuetify.
Establecer el atributo de type en type="number" es el camino a seguir.
originales :
Podrías hacer el tuyo propio:
new Vue({ el: '#app', data () { return { foo: 0 } }, methods: { increment () { this.foo = parseInt(this.foo,10) + 1 }, decrement () { this.foo = parseInt(this.foo,10) - 1 } } }) <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> <div id="app"> <v-app> <v-content> <v-container> <v-text-field v-model="foo" type="number" label="Number" append-outer-icon="add" @click:append-outer="increment" prepend-icon="remove" @click:prepend="decrement"></v-text-field> </v-container> </v-content> </v-app> </div>