Modifiers are incredibly useful tools for quickly adding essential front-end logic to directives. Vue offers modifiers for many of their directives, including the main topic of this lesson: v-model. Yes, that’s right, we can use modifiers to make our form fields even more versatile.
Vue offers the following three modifiers for v-model:
.number— automatically converts the value in the form field to a number.trim— removes whitespace from the beginning and ends of the form field value.lazy— only updates data values whenchangeevents are triggered (often when a user moves away from the form field rather than after every keystroke)
You can find out more information about these modifiers in the Vue documentation.
Instructions
Let’s use modifiers to clean up some of the data in our form.
First, let’s use the .trim modifier to remove any potential whitespace from our text fields. Add .trim to the following form fields:
- The “First Name”
<input>field - The “Last Name”
<input>field - The “Email”
<input>field - The “Special Requests”
<textarea>field
Next, let’s use the .number modifier to ensure all of our number fields are stored as the correct data type.
Add the .number modifier to the “Ticket Quantity” <select> field.