Break large forms into smaller components using props
and slots
to keep the code modular and maintainable.
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.
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.
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:
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.
Next, we’ll import the Form
component and render it in the App.vue
file:
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.
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.
Haven’t found what you were looking for? Contact Us