我正在尝试制作一个可重用的 vue 单选按钮组件,该组件将采用变量名称和包含标签和值的对象,然后使用 v-for 呈现单选按钮列表。
我在每一半问题上都取得了成功,但没有设法将它们结合起来:
//component
const Radio = {
template: '#test',
prop: ['value'],
data () {
return {
selected: this.value
}
},
model: {
prop: 'value',
event: 'change'
},
methods: {
handleClickInput (e) {
this.$emit('change', this.selected)
}
}
}
//app
var app2 = new Vue({
el: '#app2',
data: {
door: '',
doorOptions: {
'Yes': 1,
'No': 0,
}
},
components: { Radio, }
})Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app2">
<radio v-model="door"></radio>
<p>
door = {{door}}
</p>
</div>
<template …Run Code Online (Sandbox Code Playgroud)