Creating a form with checkboxes

Asking for user input is fundamental in today's web apps. Presenting the user with multiple choices makes the interface more fun to use and is necessary for structured input.

In this recipe, you will learn how to create checkboxes by building a confirmation page for your own print shop!

Getting ready

We already know how data binding works in Vue, so you are good to go. Otherwise go back to the first recipe, collect 200, and then proceed to the React to events like clicks and keystrokes recipe in Chapter 1, Getting started with Vue.js, to learn more about the v-model directive.

How to do it...

Let's suppose you have to set up a Martian printing shop with three different printers:

• Monochrome printer
• Plasma Color printer
• 3D DNA Clone printer

The confirmation page will basically be just a form:

<div id="app"> 
  <form> 
    <!-- list of printers go here --> 
  </form> 
</div>

Instead of name, we will use v-model to bind our model to the view...