Vue Simple Checkbox Binding

by Ben Clayton

HTML

<div id="app">
  <h2>Demo of Vue Class bound to Checkbox</h2>

  <label>
        <input name='Q1' type="checkbox"
         >

        <span v-if="Q1.value">
        <b>I like js</b>
        </span>
        <del v-else>
          I dislike fortran
        </del>
      </label>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

var config = {
	"Q1" : { 
  	"type" : "checkbox"
  }
};


function boot(){

	for (var ctrl in config ){
  	console.log(ctrl);
    $("#" + ctrl).attr('v-model',ctrl + ".value" );
  }



	new Vue({
  	el: "#app",
  	data: {
    	 "Q1": { value:true }
 		 },
  		methods: {
 			}
	});
}

boot();