Article directory
- Scenario:
It is necessary to bind the values of different attributes in the radio-group to display the content of another attribute. The value bound to this group is
admin_state:true/false
(This field has only two attributes, true or false). But at this point I want to add and display another field with associated information
force_on:true/false
- Ultimately, this effect should be achieved:
at the same time, when selecting content, the corresponding value can be associated with changes. - Ideas:
- Use v-for to add a new object,
{ label: 'Force_on', value: 'force_on' },
- Analyze the constraint relationship between admin_state and force_on fields
- When the Force_on label is selected in the options, the value of admin_state at this time is
“force_on”
- At this point, it is necessary to map the value of the force_on field to true, and then set admin_state to false
- Use v-for to add a new object,
1. Template
<a-form-item :label="t('app.poe.admin_state')" name="pddet_mode" required>
<a-radio-group v-model:value="info.admin_state" button-style="solid">
<a-radio-button v-for="(o, index) in [...MergeStateOpts]" :key="index"
:value="o.value"> {
{
o.label }}
</a-radio-button>
</a-radio-group>
</a-form-item>
Two, JS
1. Label
const MergeStateOpts = [
{
label: 'Disable', value: false },
{
label: 'Enable', value: true },
{
label: 'Force_on', value: 'force_on' },
];
2. Logic
// 父组件传来的值(函数1)
if (data.info.force_on == true)
data.info.admin_state = 'force_on' //才可以使得radio对应上value值
// confirm校验时的值(函数2)
let data = JSON.parse(JSON.stringify(info.value));
if (data.admin_state === 'force_on') {
//此时代表我们将force_on的值设为了true
data.force_on = true;
//因为两者不能共存
data.admin_state = false;
} else {
//因为两者不能共存
data.force_on = false;
}