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?
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://vuejs.org/v2/guide/forms.html#number
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>
Yes there is:
<v-text-field
v-model="numberValue"
hide-details
single-line
type="number"
/>
Check out slider component docs for a working example.
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
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>