Is there specific number input component in Vuetify?

javascript css vue.js material-design vuetify.js
Tutu Kaeen picture Tutu Kaeen · Dec 3, 2018 · Viewed 54.7k times · Source

I've seen a component in Element UI for managing the amount of items, it's over here:

https://element.eleme.io/#/en-US/component/input-number

I would want to use something like that in Vuetify, but I cannot find a similar component or even similar style example in Material Design. What's the best way to achieve it?

Answer

yukashima huksay picture yukashima huksay · Aug 20, 2019

Yes there is:

<v-text-field
  v-model="numberValue"
  hide-details
  single-line
  type="number"
/>

Check out slider component docs for a working example.

Related questions

Vue.js data-bind style backgroundImage not working

I'm trying to bind the src of an image in an element, but it doesn't seem to work. I'm getting an "Invalid expression. Generated function body: { backgroundImage:{ url(image) }". The documentation says to use either 'Kebab-case' or 'camel-case'. <div …

Read More
Center content vertically on Vuetify

Is there a way to center content vertically in Vuetify? With the text-xs-center helper class, the content gets centered horizontally only: <v-container grid-list-md text-xs-center> <v-layout row wrap> <v-flex xs12> Hello </v-flex> </…

Read More
How Do I change font-size in vuetify component

I use v-text-field, and v-select, with vue-loader. I tried to change font-size, but I could not. How Do I change font-size? My code likes this. <template lang="pug"> p label-1 v-text-field(...) p label-1 v-text-field(...) </template> <…

Read More