Vue

by mitya33

HTML

<div id=app>
	<p>Example 1 - works! (Binding the prop value.)</p>
	<checkbox :checked=isChecked />
</div>

<div id=app2>
	<p>Example 2 - <b>doesn't work!</b> (Unbound prop value - will always start checked.)</p>
	<checkbox checked=false />
</div>

CSS

div { border: solid 1px #d70; padding: 1rem; margin: 1rem; }

Vue

Vue.component('checkbox', {
	props: ['checked'],
	template: `<input type=checkbox :checked=checked>`
});

//Example 1 - works: bound property
new Vue({
	el: "#app",
	data: {
		isChecked: true //<-- toggle this
	}
});

//Example 2 - doesn't work: unbound property
new Vue({
	el: "#app2"
});