CODEWITHSUNDEEP
javascriptcssvue.jsmaterial-designvuetify.js
Zbyszek Kisły
Zbyszek Kisły

Reputation: 2238

Is there specific number input component in Vuetify?

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?

Upvotes: 57

Views: 160893

Answers (6)

nbro
nbro

Reputation: 15858

The other answers are outdated.

There's an experimental component just for this called VNumberInput.

This feature requires veutify version v3.5.10

I've looked into the veutify GitHub issue tracker and I've already encountered a few issues and bugs, so use it at your own risk. But I assume that eventually this or a similar component will be part of the stable components and in general I expect it to work, although I've also just started to use it.

Now, to use it, you need to do the following in main.ts (or main.js)


import { createVuetify } from 'vuetify'
import * as directives from 'vuetify/directives'
import * as components from 'vuetify/components'

import * as labsComponents from 'vuetify/labs/components' // Add this

const vuetify = createVuetify({
  components: {
    ...components,
    ...labsComponents // Add this
  }, 
  directives: { directives }
})

After that, inside your template you can simply add <v-number-input />. There are options you can pass to this component. For more info, please, check the documentation here.

Upvotes: 3

Brayan Aguilar
Brayan Aguilar

Reputation: 894

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"
  prepend-icon="remove"
  @click:append-outer="increment"
  @click:prepend="decrement">
</v-text-field>

type="number" was delete

Upvotes: 37

yukashima huksay
yukashima huksay

Reputation: 6238

Yes there is:

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

Check out slider component in the doc for a working example.

Upvotes: 87

UncertaintyP
UncertaintyP

Reputation: 179

Some concepts for number inputs get mixed up here.

  1. 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

  2. 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.

  3. 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

Upvotes: 13

Brian Lee
Brian Lee

Reputation: 18197

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>

Upvotes: 53

Jesvin
Jesvin

Reputation: 489

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>

Upvotes: -6

Related Questions