Summary

In this lesson, you learned that:

• v-model connects a field with a ref both ways: what's typed goes into the ref, and a change of the ref shows in the field. It does what :value and @input do together, and in the template, it's written without .value.
• It works on text fields and on a textarea (never {{ }} between its tags), on a select, whose ref gets the value of the chosen option (:value when the options come from v-for), and on radio buttons, whose ref gets the value of the checked one.
• A checkbox with a ref of true or false answers yes or no. Several checkboxes with the same array fill it with the values of the checked ones.
• The value of a field is always text. .trim removes the spaces at its start and end, and .number turns it into a number. Fields with type="number" get .number by themselves, and radio buttons and checkboxes get numbers with :value.
• @submit.prevent on a form runs your function when the form is sent. Without .prevent, the page loads again, and the app starts over.
• To add an item from a form, push an object with its own id into the array, then empty the fields by setting their refs.
• Error messages are in the template, with v-if, and a ref says when to show them. :disabled keeps a button from being clicked until the form is filled in.

In the next lesson, Computed Values and Watchers, you'll write values made from other values once, such as the total of an order, and run code whenever a value changes, for example to save the order.

But first, a little practice: Corner Café takes table bookings. App.vue has only a heading, and you'll write the form yourself. A tip: keep the message about the booking in a ref of its own, so that it stays when the name field is emptied. And v-for over a number makes the options quickly.