Sometimes, we want to convert the number input value to a number in Vue.js.
In this article, we’ll look at how to convert the number input value to a number in Vue.js.
Convert the Number Input Value to a Number in Vue.js
We can convert the number input value to a number in Vue.js by adding the number modifier to the v-model directive.
For instance, we can write:
<template>
<div id="app">
<input v-model.number="quantity" type="number" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
quantity: 0,
};
},
watch: {
quantity(val) {
console.log(val);
},
},
};
</script>
We add the number input with the v-model directive with the number modifier set to quantity to bind the input value to the quantity reactive property.
The number modifier will automatically convert the input value to a number.
And we can see that from the quantity watcher, which should be the number that we typed in.
Conclusion
We can convert the number input value to a number in Vue.js by adding the number modifier to the v-model directive.
