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?

yukashima huksay · Answer 1 · 2019-08-31T11:34:19.700

86

Yes there is:

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

Check out slider component docs for a working example.

edited Aug 31 '19 at 11:34

answered Aug 20 '19 at 05:56

yukashima huksay

5,834
7
45
78

Cool, if type="number" you even get up and down buttons at the right end – henon May 26 '20 at 17:52
1

Well it works kind of ... as long as people keep in mind that you can still enter non numeric values manually. – Hexodus Aug 25 '20 at 14:39
4

@Hexodus `v-model.number` can help in that case – yukashima huksay Sep 07 '20 at 12:18
See the answer by UncertaintyP for some notes on the `.number` directive. – yukashima huksay Dec 03 '20 at 09:51

Brian Lee · Accepted Answer · 2020-07-03T00:56:44.693

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>

`type="tel"` may be preferred: `type="number"` brings in some (likely unexpected) syntax limitations that `tel` doesn't seem to have. `numeric` doesn't seem to be available. — PotatoFarmer, Apr 09 '21 at 01:56

score 36 · Answer 3 · answered Apr 20 '20 at 07:19

36

in vuetify.js v2.2.22 to convert your <v-text-field> in number you need write 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" was delete

answered Apr 20 '20 at 07:19

Brayan Aguilar

876
8
8

3

This is a little misleading. See UncertaintyP's answer below. `v-model.number` comes from Vue not Vuetify. `type="number"` comes from HTML, not Vue or Vuetify. https://vuejs.org/v2/guide/forms.html#number – tgf Nov 26 '20 at 20:28
1

Btw v-model.number is a nice catch, thank you! – funder7 Mar 08 '21 at 20:50
Why I didn't know this before ? – eli May 08 '23 at 13:06
In my case it is rendering in the european number format ( 0,02) , is there a way to tell it to use the US format (0.02) ? – Berni May 17 '23 at 07:13

score 14 · Answer 4 · edited Jul 15 '22 at 05:29

Some concepts for number inputs get mixed up here.

I can not see type="number" being deleted in 2.2.22 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22 Also I see it being rendered correctly at least in 2.3.10
The input field with attribute type="number" will be handled differently depending on the browser, OS and locale settings (e.g. I am still able to input free text in FF but not Chrome). Typically the keyboard layout changes on smart phones.
v-model.number is purely a directive for Vue. As you can see, internally, Vue simply tries to parse the input with parseFloat and uses that on success - otherwise it will be text and handled as a string in Vue/JS. https://v2.vuejs.org/v2/guide/forms.html#number

score -5 · Answer 5 · answered Aug 09 '19 at 10:53

Vue vuetify Code using :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>

Is there specific number input component in Vuetify?

5 Answers5

Linked