Vue.js+Vuetify同值单选按钮无法选中及循环异常解决问询

我来帮你搞定这两个Vuetify单选按钮的坑，这本质上是因为Vuetify的单选组默认通过value字段判断选中状态，当多个选项的value重复时，就会出现识别混淆的情况。下面分问题拆解并给出具体解决方案：

问题分析 #

1. 同值单选按钮无法选中：当两个单选按钮的value相同时（比如示例里的Radio 1和Radio 2都用"radio-1"），点击第一个按钮时，v-model的值已经是"radio-1"，组件会认为它已经被选中，不会触发视觉上的选中状态更新；而点击第二个按钮时，v-model还是设为"radio-1"，此时两个按钮的value都匹配v-model，会出现同时被选中的异常。
2. 循环生成时全选异常：循环生成单选按钮时，如果所有选项的value重复，或者没有给每个选项设置唯一标识，Vuetify无法区分不同选项，就会导致全部选项被标记为选中。

解决方案：绑定唯一标识，映射实际值 #

核心思路是：让单选组的v-model绑定每个选项的唯一标识（比如自定义ID），而不是直接绑定需要的业务值（比如价格）。当需要获取业务值时，再通过唯一标识映射回去。这样既保证了单选按钮的正常选中逻辑，又能满足“同业务值但可选择不同选项”的需求。

修改后的完整代码示例 #

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row wrap>
        <!-- 解决同值单选问题 -->
        <v-flex xs12 md6>
          <v-subheader>同值单选修复示例</v-subheader>
          <v-card flat>
            <v-card-text>
              <p>选中的选项ID: {{ ex8 || 'null' }}</p>
              <p>对应的业务值: {{ selectedValue || 'null' }}</p>
              <v-radio-group v-model="ex8" :mandatory="false">
                <v-radio label="特性1（价格20）" value="feat-1"></v-radio>
                <v-radio label="特性2（价格20）" value="feat-2"></v-radio>
              </v-radio-group>
            </v-card-text>
          </v-card>
        </v-flex>

        <!-- 循环生成单选按钮修复示例 -->
        <v-flex xs12 md6>
          <v-subheader>循环生成单选修复示例</v-subheader>
          <v-card color="secondary" flat>
            <v-card-text>
              <p class="white--text">选中的选项ID: {{ ex9 || 'null' }}</p>
              <p class="white--text">对应的业务值: {{ loopSelectedValue || 'null' }}</p>
              <v-radio-group v-model="ex9" :mandatory="false">
                <v-radio 
                  v-for="item in featureList" 
                  :key="item.id" 
                  :label="`${item.name}（价格${item.price}）`" 
                  :value="item.id" 
                  dark
                ></v-radio>
              </v-radio-group>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  data () {
    return {
      ex8: null,
      ex9: null,
      // 模拟业务数据：两个特性价格相同，但有唯一ID
      featureList: [
        { id: 'feat-3', name: '特性3', price: 20 },
        { id: 'feat-4', name: '特性4', price: 20 },
        { id: 'feat-5', name: '特性5', price: 30 }
      ]
    }
  },
  computed: {
    // 映射选中ID到业务值
    selectedValue() {
      if (!this.ex8) return null;
      // 如果是静态选项，直接判断
      return this.ex8 === 'feat-1' || this.ex8 === 'feat-2' ? '20' : null;
    },
    loopSelectedValue() {
      const selectedItem = this.featureList.find(item => item.id === this.ex9);
      return selectedItem ? selectedItem.price : null;
    }
  }
})
</script>

关键说明 #

• 唯一标识绑定：每个v-radio的value设置为唯一ID（比如feat-1、feat-2），确保单选组能区分不同选项，避免选中逻辑混乱。
• 业务值映射：通过计算属性selectedValue和loopSelectedValue，将选中的唯一ID映射回实际需要的业务值（比如价格），满足业务需求。
• 循环生成注意事项：循环时必须给每个v-radio设置唯一的:key，配合唯一的value，彻底解决循环时的全选异常。

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