Vue.js 2 Cookbook

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 ...