Welcome to Vue Forms! In Vue Data, you learned how to store dynamic data and methods on Vue instances and then display that data using mustache templates. In this lesson, you will learn how to use HTML forms to modify this data.
The first half of the lesson will discuss how to bind the different types of HTML form fields to the data stored on your Vue instances. The second half will then cover how to clean, validate, and submit this data allowing you to create complete, interactive forms for your users.
With these goals in mind, let’s jump into this lesson!
Instructions
To the right, you’ll see the current state of our e-ticketing front-end app. We are storing all of our data on the Vue app, but the form fields don’t actually modify this data.
In this lesson, we will:
- Bind all of the form fields to our Vue data
- Implement the functionality to reset and submit our form and clean up our form data
- Implement form validation to ensure users are using our form as expected
Take a moment to review the current code. Remind yourself of all of the data, watchers, and methods we are currently storing on our Vue app in app.js. Then take a look at index.html to see the form we will use to manipulate this Vue data. Once you’re done, click “Next” to start learning about Vue forms!