Vue 3 Form Handling with Form Input Bindings & v-model directive

Forms are an integral part of any web application. We use forms to collect information from the user such as login details, registration details or any application specific data requirement. In this post, we will look at Vue 3 form handling with form input bindings using the v-model directive.

When dealing with forms, the main issue is the syncing of state of form input elements with the corresponding state in JavaScript. The usual way of doing it is manually handle value bindings and change event listeners to update the JavaScript state.

VueJS makes it easy to handle forms with the v-model directive.

If you are new to VueJS syntax, I recommend you to start with our post on VueJS composition vs options API.

1 – Vue 3 Form Handling using v-model

Let us look at a simple example of how an input field is usually handled.

<input
  :value="text"
  @input="event => text = event.target.value">

Basically, we use event handler and value binding to make changes based on change event.

In VueJS, we can simplify the entire syntax using the v-model directive.

<input v-model="text">

The great part part about v-model is that it works seamlessly with other types of data inputs such as text area, checkbox and drop-downs.

Let us look at other options one-by-one.

2 – VueJS v-model Basic Usage

In this section, we look at various types of data inputs supported by the v-model.

2.1 – Text & Multi-line Text

See below example for simple text input field.

<script setup>
import { ref } from 'vue'

const name = ref('')
</script>

<template>
  <p>Name is: {{ name }}</p>
  <input v-model="name" placeholder="enter your name" />
</template>

As you can see, this is a very simple example for a form field to enter the name. We bind the JavaScript variable name using v-model directive on the <input> element. As user types a name, the same is reflected in the corresponding variable.

Check out our detailed post on VueJS reactivity to know about the ref keyword.

Next, let us look at how to handle multi-line text fields.

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

<template>
  <span>Multiline message is:</span>
	<p style="white-space: pre-line;">{{ message }}</p>
	<textarea v-model="message" placeholder="add multiple lines"></textarea>
</template>

Here also, the concept is pretty much the same. Instead of <input>, the v-model is applied to <textarea>.

2.2 – Checkbox

Checkbox is another important type of input field for a wide variety of use-cases.

We can use checkbox in VueJS as follows.

<script setup>
import { ref } from 'vue'

const checked = ref(true)
</script>

<template>
	<input type="checkbox" id="checkbox" v-model="checked" />
	<label for="checkbox">{{ checked }}</label>
</template>

Here, we bind the checked variable using v-model.

Similarly, it is also possible to bind multiple checkbox values using an array in JavaScript ref.

<script setup>
import { ref } from 'vue'

const educationLevels = ref([])
</script>

<template>
  <div>Education Levels: {{ educationLevels }}</div>

  <input type="checkbox" id="graduate" value="Graduate" v-model="educationLevels" />
  <label for="graduate">Graduate</label>
 
  <input type="checkbox" id="post-graduate" value="PostGraduate" v-model="educationLevels" />
  <label for="postgraduate">PostGraduate</label>
 
  <input type="checkbox" id="doctorate" value="Doctorate" v-model="educationLevels" />
  <label for="doctorate">Doctorate</label>
</template>

As you can see, educationLevels is an array. It will contain the list of all values the user selects by ticking the checkbox.

2.3 – Radio Buttons

We can also handle radio buttons using Vue 3 v-model directive.

<script setup>
import { ref } from 'vue'

const picked = ref('One')
</script>

<template>
  <div>Picked: {{ picked }}</div>

	<input type="radio" id="one" value="One" v-model="picked" />
	<label for="one">One</label>

	<input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
</template>

Here, we begin with a default radio button selected. Then, we use the v-model as picked for two input radio buttons.

2.4 – Select Button or Dropdown

Lastly, we can also support dropdown or select input field using the form input bindings.

See below example:

<script setup>
import { ref } from 'vue'

const selected = ref('')
</script>

<template>
  <span> Selected: {{ selected }}</span>

  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>Gradudate</option>
    <option>Postgraduate</option>
    <option>Doctorate</option>
  </select>
</template>

Conclusion

With this, we have looked at Vue 3 form handling with different types of input. We specifically covered normal input fields, multi-line text, radio buttons, checkboxes and drop-downs.

Basically, v-model directive is a very powerful tool that makes the task of handling input fields relatively easy in VueJS.

Want to look at more Vue 3 features? Check out this post on VueJS template ref.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.