自定义RadioButton组件问题：多组件共存时勾选标记消失

问题原因 #

所有<RadioButton>组件内的input都使用了相同的name="radio-input"，浏览器会将同一页面内同名的radio输入框视为同一组，选中其中一个时会自动取消其他同名radio的选中状态。这就导致其他组件的原生checked状态被重置，CSS的:checked伪类匹配失效，最终表现为checkmark的指示标记消失。

虽然v-model绑定的值是正确的（组件通过$emit传递值，不受原生radio组规则影响），但原生input的checked状态已被浏览器修改，所以自定义样式无法正确显示选中状态。

修复步骤 #

1. 改造RadioButtonGroup组件，添加独立组名支持 #

给每个组生成唯一的name，确保不同组的radio不会被浏览器归为同一组：

<template>
  <div class="radio-button-group">
    <RadioButton 
      v-for="option in options" 
      :key="option" 
      :option="option" 
      :group-name="groupName" 
    />
  </div>
</template>

props: {
  options: {
    required: true,
    type: Array
  },
  groupName: {
    type: String,
    // 自动生成唯一标识作为默认组名
    default: () => `radio-group-${Math.random().toString(36).slice(2, 8)}`
  }
}

2. 改造RadioButton组件，绑定组名并同步选中状态 #

接收组名prop，修改input的name属性，同时同步原生checked状态与v-model值：

<template>
  <label :for="`${groupName}-${option}`" class="radio-container">
    {{ option }}
    <input
      :id="`${groupName}-${option}`"
      class="radio-input"
      :name="groupName"
      :value="option"
      type="radio"
      :checked="$parent.$vModel === option"
      @change="$parent.$emit('input', option)"
    />
    <span class="checkmark"></span>
  </label>
</template>

props: {
  option: {
    required: true,
    type: String
  },
  groupName: {
    required: true,
    type: String
  }
}

注：修改id为${groupName}-${option}是为了避免不同组出现相同option值时，label与input绑定错误的问题。

3. 父页面使用（可选自定义组名） #

可以手动指定组名，也可以使用组件自动生成的默认值：

<RadioButtonGroup
  v-model="transactionType"
  :options="transactionTypeOptions"
  group-name="transaction-type-group"
/>
<RadioButtonGroup
  v-model="showAddress"
  :options="showAddressOptions"
  group-name="show-address-group"
/>

修复后效果 #

不同组的radio将独立工作，选中某一组的选项时，其他组的选中状态和样式不会被影响，同时v-model值依然保持正确。

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