<script type="text/x-template" id="checkbox-template">
<div class="checkbox">
<input type="checkbox" :id="id" :value="val" v-model="checked" @change="onChange" />
<label :for="id"><slot></slot></label>
</div>
</script>
<div id="app">
<div>
<h3>Options</h3>
<checkbox v-for="option in options" :id="option.name" :val="option" v-model="selected">{{ option.name }}</checkbox>
</div>
<div>
<h3>Selected</h3>
<div v-for="option in selected">
<span>{{ option.name }}</span>: <span>{{ option.age }}</span>
</div>
</div>
<div>
<h3>Raw Output</h3>
<div>{{ selected }}</div>
</div>
</div>
Vue.component("checkbox", {
template: "#checkbox-template",
props: [ "id", "value", "val"],
data() {
return {
proxy: false
};
},
computed: {
checked: {
get() {
return this.value;
},
set(value) {
this.proxy = value;
}
}
},
methods: {
onChange(event) {
this.$emit("input", this.proxy);
}
}
});
new Vue({
el: "#app",
data() {
return {
options: [{
name: "John",
age: 32
}, {
name: "Jane",
age: 28
}],
selected: []
}
}
});
No comments:
Post a Comment