HTML部分:
<div id="radio">
<my-raido v-bind:pick="checked" v-for="item in items" v-bind:item="item" v-on:gets="getRadioValue" ></my-raido>
<span>checked: {{ checked }}</span>
</div>
Javascript部分:
<script>
Vue.component('my-raido', {
template: '
<div>
<input type="radio" v-bind:id="item.value" v-model="pick" v-bind:value="item.value" v-on:click="setRadioValue($event.target.value)">
<label v-bind:for="item.value">{{item.value}}</label>
</div>
',
props : ['pick','item'],
methods: {
setRadioValue : function(val){
this.$emit('gets',val)
}
}
})
new Vue({
el : "#radio",
data: {
checked: 'Foo',
items: [
{ value: 'Foo' },
{ value: 'Bar' }
]
},
methods : {
getRadioValue : function (val) {
this.checked = val;
}
}
})
