Is there specific number input component in Vuetify?

Question

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 1

Yes there is:

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

Check out slider component docs for a working example.

Answer 2

Update: This answer pertains to version 1 of Vuetify, yukashima huksay's answer is correct for newer versions of Vuetify.

Setting the type attribute to type="number" is the way to go.

Original:

You could just make your own:

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>