JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<div id="demo">
  <template v-for="(item, index) in itemlist">
    <label><input type="checkbox" name="condiment" :checked="selectedItems.indexOf(index) !== -1" /> {{item}}</label>
  </template>
  <div>{{selectedItems.join(', ')}}</div>
</div>

CSS

label {display: block}
input[checked] {background-color: red }

JavaScript

var demo = new Vue({
    el: '#demo',
    data: {
        selectedItems: [1,2],
        itemlist: [
        		"Mayo",
        		"Ketchup",
        		"Mustard",
        		"Honey"
        ],
        max: 2
    }
})