How to create a form in Vue.js

Form in Vue.js

Creating forms is a fundamental part of web development. Forms allow users to input data that can be processed or stored in a database. Whether for user registration or surveys, forms play a crucial role in the interaction between users and servers. Vue.js, a JavaScript framework, simplifies this process with its powerful data binding and component system.

We’ll learn how to create a form in Vue.js. We’ll cover the basics of form handling, including input fields, data binding with v-model, form submission, and conditional rendering. We’ll create a simple registration form, which will contain the following elements:

• An input field to enter the name.

• An input field to enter the email.

• The radio buttons to select gender.

• A button to submit the form.

Build an e-commerce store in Vue.js by completing this project: E-commerce Store in Vue.js With Payment Integration.

Step 1: Creating the registration form

First, we’ll start by creating the actual form. We’ll create a component that contains the actual form structure, submission logic, and input handling. Let’s look at the code below:

Explanation

• Line 3: We create a form and bind the submitForm() method to its submit event. The @submit.prevent modifier prevents the page from refreshing on submission. The v-if="!formSubmitted" condition ensures the form is displayed only when the form has not yet been submitted.

• Lines 4–5: We create a text input field for the user’s name, with two-way data binding using v-model="formData.name". The required attribute ensures that this field cannot be left empty before form submission.

• Lines 7–8: We create an email input field bound to formData.email. The type="email" ensures that the input follows an email format, and required enforces user input.

• Lines 10–22: We create two radio buttons for gender selection. Both are bound to formData.gender via v-model. The user can select only one option, and the selected value will be stored in formData.gender.

• Line 24: This button submits the form and triggers the submitForm() method.

• Lines 27–33: The v-else block ensures this section is displayed only when the form is submitted (formSubmitted is true). It shows the submitted data and provides a button to reset the form by calling resetForm().

• Lines 38–46: We import Vue’s reactive and ref functions to manage the component’s state. formData is a reactive object holding the form’s input data. formSubmitted is a ref that stores whether the form has been submitted (true/false).

• Lines 48–50: The submitForm() method sets formSubmitted to true when the form is submitted, triggering the UI to show the confirmation message.

• Lines 52–57: The resetForm() function clears the form fields and sets formSubmitted back to false, resetting the UI.

• Lines 60–116: We style the form and inputs for a better appearance.

  • The form is centered and given a max-width to fit smaller screens.

  • Inputs are styled to be block elements with padding and width adjustments.

  • Buttons are given a green background and rounded borders to match common UI design patterns.

Step 2: Rendering the form

Next, we’ll import the Form component and render it in the App.vue file:

Explanation

• Lines 1–5: The <template> block defines the structure of the component’s HTML.

  • Line 3: We include the Form component within the root component.

• Lines 7–9: We directly import and use the Form module.

• Lines 11–16: We style the container that holds the form for a better appearance.

  • The font-family property ensures that the text in the application uses the specified fonts (Avenir, Helvetica, Arial, or a sans-serif fallback).

  • The text-align: center rule centers the text within the #app div.

Do you want to learn how add authentication in a Vue.js application? Try out this project: Authentication With Vue.js Using Auth0.

Working code example of the form in Vue.js

Let’s look at a working code example of what we have learned so far:

In the output, we see a form that contains an input field for full name and email, a radio button to select gender, and a submit button. When the form is submitted, the submitForm() function is invoked, and the formSubmitted is set to true. Therefore, the form is hidden due to the conditional rendering set by v-if and the data entered by the user is displayed.

Learn how to create advance forms in Vue.js by trying out this project: Create a Healthcare Application Using Vue.js.