How to set a default value to input with a v-model in Vue

In this article, we will learn how we can set a default value for an input field with v-model in vuejs.

Let’s suppose we have a form with some input fields like name, email, and amount.

<template>
    ...
    <input type="text" class="form-control" v-model="amount">
    ...
</template>

And we want to set a default value for the amount field in the form.

So, to set a default value for the amount field in the form, we can use the v-model’s two-way binding.

We have to set the value of the amount in the data object in the script tag like this.

data:  () => {
return {
  amount: 2000
 }
}

Now, when we load the form on our page, we can see the default value of the amount as 2000 in the form input field.

And if you want to change the default amount value to a different number, then you can change it in the input field of the form.

The amount value in the data object will be overwritten by the new value.

Related Posts