Chapter 4. Forms and inputs

This chapter covers

  • Binding values to the DOM
  • Using text binding
  • Modifiers

Our application has evolved substantially since chapter 1. We’ve created items and allowed users to add items to a cart. We now need a way for our customers to check out and enter their information. Let’s add input forms to our application so the customer can enter their address and billing information into the app. Then we need to save this information in our app for later use.

To accomplish our goal, we must bind the form data to our model in our application. The v-model directive was made for this use case.


The v-model directive creates a two-way data binding between form or text area inputs and the template. This ...

Get Vue.js in Action now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.