Vue - Two Way Bind to checkbox

With watch method

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
  <h5>Open: <input type="checkbox" @change="mychange(item)" v-model="open" />{{open}}</h5>
	
	<div v-bind:style="{'height':height + 'px'}" class="box">
	<h1> OPEN</h1>
	</div>
</div>

CSS

.box {
	border:1px solid green;
	overflow:hidden;
	-moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}

JavaScript

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


var vm1 = new Vue({
  el: '#div1',
  data: {open:false,height:0},
	methods:{
		mychange:function(item){
			console.log(item.name,item.included);
		}
	},
	watch:{
		open: function(){
				this.height = this.open ? 100 : 0;
		}
	
	
	}
});