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