自定义Radio组件因label包裹导致单选组无法取消选中求助

问题根源 #

你的Radio组件未正确实现单选组的联动逻辑：

• 选中状态判断依赖独立的input.value，未与父组件的统一单选绑定值关联，导致每个Radio状态各自独立
• 原生radio的checked状态未与组件选中状态同步，破坏了浏览器原生的单选互斥机制

修复步骤（无需移除label根元素） #

1. 给组件添加v-model支持
   让组件接收父组件的绑定值，通过事件同步更新，确保同组Radio共享同一状态源。

2. 同步原生input的checked状态
   将原生radio的checked属性与组件选中状态绑定，让浏览器正确处理单选组的互斥逻辑。

3. 修正label与input的关联
   给input设置唯一id，确保label的for属性能正确关联对应input。

修改后的组件代码 #

<template lang="pug">
label(:for="`radio-${input.name}-${input.value}`")
  input(
    :id="`radio-${input.name}-${input.value}`"
    :value="input.value"
    type="radio"
    :name="input.name"
    hidden
    :checked="modelValue === input.value"
    @change="$emit('update:modelValue', input.value)"
  )
  .radio-wrapper(
    @click="handleClick()"
    :class="{'active-check': modelValue === input.value}"
  )
    .circle
      Icon(icon="checkWhite")
    |{{ input.label }}
</template>

<script>
export default {
  props: {
    modelValue: {
      type: [String, Number],
      required: true
    },
    input: {
      type: Object,
      required: true,
      validator: (val) => ['name', 'value', 'label'].every(key => key in val)
    }
  },
  methods: {
    handleClick() {
      this.$el.querySelector('input').click()
    }
  }
}
</script>

适配Vue 2.x（Nuxt 2）的调整 #

如果你的Nuxt版本基于Vue 2，需修改以下两点：

• 将modelValue prop改为value
• 将@change="$emit('update:modelValue', input.value)"改为@change="$emit('input', input.value)"

父组件使用示例 #

<template lang="pug">
div
  CustomRadio(
    v-for="option in options"
    :key="option.value"
    :input="option"
    v-model="selectedValue"
  )
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 'option1',
      options: [
        { name: 'gender', value: 'option1', label: '选项1' },
        { name: 'gender', value: 'option2', label: '选项2' },
        { name: 'gender', value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>

关键说明 #

• 点击.radio-wrapper时触发原生input的点击，确保浏览器原生单选逻辑生效，避免手动状态同步误差
• 用modelValue === input.value判断选中状态，让同组Radio的状态统一依赖父组件的绑定值，实现联动

内容的提问来源于stack exchange，提问作者Marnix Elling