Vue.js动态单选按钮绑定问题：跨市场选中状态冲突

业务场景为用户创建市场与产品，为每个市场解锁产品并配置属性，动态渲染多个市场的单选按钮时，出现以下问题：选中market1的选项后，再选中market2的同类型选项，market1的选中状态会被取消。

问题根源 #

浏览器会将拥有相同name属性的单选按钮视为同一组，同一组内只能选中一个选项。原代码中单选按钮的name仅使用field.name，导致不同市场的同名字段共享同一个name，触发跨市场的互斥选中逻辑。

修正代码 #

<div v-for="market in markets" :key="market.id">
  <div>
    <span>{{ market.name }}</span>               
  </div>              
  <div>
    <div v-for="(field, index) in market.market_fields" :key="index">
      <label :for="`${market.id}_${field.name}`">{{field.label}}</label>
      <div v-if="field.type != 'radio'">
        <input :type="field.type" v-model="field.value">
      </div>
      <div v-else>
        <input 
          type="radio" 
          :id="`${market.id}_${field.name}_true`"
          :name="`${market.id}_${field.name}`" 
          :value="true" 
          v-model="field.value"
        >
        <label :for="`${market.id}_${field.name}_true`">ja</label><br>
        <input 
          type="radio" 
          :id="`${market.id}_${field.name}_false`"
          :name="`${market.id}_${field.name}`" 
          :value="false" 
          v-model="field.value"
        >
        <label :for="`${market.id}_${field.name}_false`">nein</label><br>
      </div>
    </div>                
  </div>                
</div>

关键修改说明 #

1. 唯一化单选按钮组：将单选按钮的name设置为${market.id}_${field.name}，通过市场ID保证同一字段在不同市场下的单选按钮组完全独立，不会互相干扰。
2. 修复label关联：给每个单选按钮设置唯一id，同步修改对应label的for属性，确保点击标签能正确触发目标单选按钮的选中状态，避免跨市场标签互相影响。
3. 优化渲染逻辑：给单选按钮区域添加v-else，仅在字段类型为radio时渲染该区域，减少冗余DOM元素。

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