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:

<label>   <input type="checkbox" v-model="outputPrinter" value="monochrome"/>   Monochrome </label>

Every <input> checkbox with the same v-model will participate in a reactive array that will be updated in real time. Let's declare this array in the Vue instance:

new Vue({     el:'#app',   data:{     outputPrinter: []   } })

This is just a regular array. All the selected printers will be ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.