Learn
Vue Forms
Input Modifiers

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 when change events 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

1.

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
2.

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.

Folder Icon

Sign up to start coding

Already have an account?