Vue - Two Way Bind to checkbox

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
	<div v-for="item in items">
  <h5  v-bind:class="{ redcolor:item.included }"><input type="checkbox"  @change="mychange(item)" v-model="item.included" />{{item.name}} is {{ item.included }}</h5>
	</div>
  
  <div v-if="timeout">
    Timed out waiting for you!
    </div>
	
</div>

CSS

.interface {}

.redcolor {
  color: red;
}

JavaScript

//---------------------------------------------------------

var myData = [{name:"Red", included:true },{name:"Green", included:false },{name:"Blue", included:false }];

var vm1 = new Vue({
  el: '#div1',
  data: {items:myData,timeout:false},
	methods:{
		mychange:function(item){
			console.log(item.name,item.included);
		}
	
	},
  mounted: function (){
  	console.log("hi");
    setTimeout(function(){this.timeout=true}.bind(this),5000);
  }
});