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?
Advertisement
Answer
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:
JavaScript
x
16
16
1
new Vue({
2
el: '#app',
3
data () {
4
return {
5
foo: 0
6
}
7
},
8
methods: {
9
increment () {
10
this.foo = parseInt(this.foo,10) + 1
11
},
12
decrement () {
13
this.foo = parseInt(this.foo,10) - 1
14
}
15
}
16
})
JavaScript
1
14
14
1
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
2
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
4
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
5
6
<div id="app">
7
<v-app>
8
<v-content>
9
<v-container>
10
<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>
11
</v-container>
12
</v-content>
13
</v-app>
14
</div>