To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to customize a spin button.
What’s a Spin Button?
A spin button is a numerical range form control.
We can include it with the b-form-spinbutton component.
For example, we can write:
<b-form-spinbutton v-model="value" min="1" max="100"></b-form-spinbutton>
We set the minimum and maximum allowed values with the min and max props.
v-model binds the inputted value to value .
Then we see a form control with a minus button on the left and a plus button on the right.
The number entered will be shown in the middle.
Make it Disabled
We can make the spin button disabled, which means that it’s non-interactive.
For instance. we can write:
<template>
<div id="app">
<b-form-spinbutton disabled v-model="value" min="1" max="100"></b-form-spinbutton>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0
};
}
};
</script>
We added the disabled prop to make it non-interactive.
Read Only
We can set it to read-only as well.
This means that we can focus on it, but we can’t select a value.
For instance, we can do this with the readonly prop:
<template>
<div id="app">
<b-form-spinbutton readonly v-model="value" min="1" max="100"></b-form-spinbutton>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0
};
}
};
</script>
Validation States
We can display the validation state.
To do this, we set the state prop.
For instance, we can write:
<template>
<div id="app">
<b-form-spinbutton :state='isValid' v-model="value" min="1" max="10"></b-form-spinbutton>
<p>Value: {{ value }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0
};
},
computed: {
isValid(){
return !!this.value;
}
}
};
</script>
We set the state prop to the computed isValid property.
Then everything is green when we set a number.
Otherwise, everything is red.
Events
The b-form-spinbutton component emits a few events.
It emits the change event when the user released the mouse button when pressing the increment or decrement buttons.
For instance, we can write:
<template>
<div id="app">
<b-form-spinbutton wrap @change="value2 = $event" v-model="value" min="1" max="10"></b-form-spinbutton>
<p>Value 1: {{ value }}</p>
<p>Value 2: {{ value2 }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: 0,
value2: 0
};
}
};
</script>
The $event variable has the value of the selected number.
We assigned that to value2 so we can display it in the bottom p element.
Conclusion
We can listen to events emitted by b-form-spinbutton and do something with the emitted value.
Also, we can make the form control disabled or read-only.
Read-only means we can focus but can’t do anything.
Disabled means that it’s not interactive at all.
We can also display the validation state of the control with the state prop.
