Mastering Vue.js Forms: A Comprehensive Guide

Mastering Forms in Vue.js: A Comprehensive Guide

Getting Started with Vue.js Forms

Learning to work with forms effectively in our favorite frameworks can save us time and energy during development. In this tutorial, we’ll explore the process of creating, validating, and utilizing inputs from a form in a Vue.js v2.x application.

Setting Up Our Vue.js App

We’ll start by creating a simple Vue.js app with basic HTML markup and importing Bulma to take advantage of some pre-made styles.

Binding Input Values with v-model

The v-model directive enables two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.

Text Input Example

Let’s create a simple text input to get a user’s full name:
html
<input v-model="form.name" type="text">

In the above code, we define the data option in our Vue instance and define a form object, which will hold all the properties we want for our form. The first property we define is name, which is bound to the text input we created.

Textarea Example

Textarea elements work similarly to regular input boxes:
html
<textarea v-model="form.message"></textarea>


Using v-model for Select Boxes

The v-model directive can also be used for select boxes. The defined model will be synced with the value of the selected option:
html
<select v-model="form.logrocket_usecase">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>

Validating User Inputs with Vee-Validate

While writing custom validation logic is possible, there’s a great plugin that helps validate inputs easily and displays the corresponding errors: vee-validate.

Setting Up Vee-Validate

We’ll include the plugin in our app and set it up:
“`html

“`

Validating Inputs

We can use the v-validate directive on our inputs and pass in the rules as string values. Each rule can be separated by a pipe:
html
<input v-validate="'required|min:3'" v-model="form.name" type="text">

Form Submission with Event Handler

To handle form submissions, we can use Vue’s submit event handler:
“`html


We can also disable the submit button if there are any errors in our form:
html
Submit
“`
Final Notes

Some other key things to note:

• Some modifiers exist for v-model on form inputs, including .lazy, .number, and .trim.
• Dynamic properties can be bound to input values using v-bind:value.

By following this guide, you’ve learned how to create a form in a Vue.js app, validate it, and work with its field values. Do you have any questions or comments about forms in Vue.js? Feel free to drop a comment and let’s get talking!