How to create a form in Vue.js

Key takeaways:

  • Vue provides the v-model attribute that allows two-way data binding. With this attribute, form elements are automatically synchronized with state variables.

  • Attributes like v-if allow developers to dynamically show or hide content based on user interaction, such as displaying a confirmation message post-submission.

  • Using @submit.prevent ensures the form submission doesn’t trigger page reloads, allowing developers to handle the data asynchronously.

  • With Vue’s architecture, developers can break down large forms into smaller, manageable components, leading to cleaner code and better maintainability.

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.

Frequently asked questions

Haven’t found what you were looking for? Contact Us


What is the best way to structure a large form?

Break large forms into smaller components using props and slots to keep the code modular and maintainable.


How do I optimize forms for performance?

Use debouncing on input handlers to reduce the frequency of function calls, especially when dealing with large datasets. This technique helps maintain smooth user interactions.


How do I add form validation in Vue.js?

You can add form validation in Vue.js by implementing checks within your component’s methods, such as verifying input fields before processing the data. You can also use third-party libraries like Vuelidate or vee-validate, which provide a range of built-in validation rules.


What is the difference between v-model and v-bind?

v-model is used for two-way data binding, allowing changes in the input field to automatically update the bound data and vice versa. It’s commonly used with form elements like <input>, <textarea>, and <select>.

v-bind is used for one-way binding, where it dynamically binds an HTML attribute to an expression or a data property. It’s used to set attributes like href, class, style, etc., based on the component’s data.


Free Resources