问题描述
我正在构建一个小型 Vue 组件。当我为单选按钮组写出 HTML 时,它工作得很好。
然后我更改了代码以绑定到数据源,并且奏效了,但是,它失去了样式。
<template>
<div>
<!-- This group does not apply the button style -->
<a-radio-group default-value="A" button-style="solid" :options="data" />
<!-- This group applies the button style perfectly -->
<a-radio-group default-value="A" button-style="solid">
<a-radio-button value="a">
A
</a-radio-button>
<a-radio-button value="b">
B
</a-radio-button>
<a-radio-button value="c">
C
</a-radio-button>
<a-radio-button value="d">
D
</a-radio-button>
</a-radio-group>
</div>
</template>
<script>
const data = [{
value: 'A',label: 'A',disabled: false,},{
value: 'B',label: 'B',{
value: 'C',label: 'C',disabled: true,{
value: 'D',label: 'D',}]
export default {
name: 'SystemSelector',data() {
return {
data,}
},mounted() {
},}
</script>
使用上面的代码,两个单选按钮组都包含项目 A 到 D。两个列表都默认选择了项目 A。由于应用了“实体”样式,第一个列表呈现为“普通”单选按钮,而第二个列表呈现为“选项卡”。
为什么我的第一个单选按钮组没有成功应用相同的样式?
解决方法
它并不完美,但这让我大获全胜:
<template>
<div>
<a-radio-group name="SourceSystem" default-value="XXX" @change="onChange" v-
model="selectedSystem" button-style="solid">
<a-radio-button
v-for="(item,index) in data"
:key="index"
:value="item.value"
v-on="{ defaultChecked: item.value==='XXX' ? true : false}"
:disabled="item.disabled">
{{ item.label }}
</a-radio-button>
</a-radio-group>
</div>
</template>
这有点逃避,因为我基本上几乎手动绘制列表。
默认值选择仍然不能完美工作(它不会在页面加载时选择默认值),但至少它以我想要的方式呈现列表。