Vue+Vuetify：如何隐藏首个单选组已选选项在第二个单选组中

核心思路是通过计算属性动态生成第二个单选组的选项列表，过滤掉第一个单选组已选中的选项，同时监听第一个单选组的选中状态，避免第二个单选组残留已被隐藏的选中值。

完整代码实现 #

<template>
  <div>
    <v-radio-group v-model="firstIdRadio" label="第一个单选组">
      <v-radio
        v-for="option in idOptions"
        :key="option"
        :label="option"
        :value="option"
      />
    </v-radio-group>

    <v-radio-group v-model="secondIdRadio" label="第二个单选组">
      <v-radio
        v-for="option in filteredSecondOptions"
        :key="option"
        :label="option"
        :value="option"
      />
    </v-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstIdRadio: "",
      secondIdRadio: "",
      idOptions: ['GSTN1', 'GSTN2', 'GSTN3'] // 统一维护基础选项数组
    };
  },
  computed: {
    // 动态过滤第二个单选组的选项：排除第一个已选中的项
    filteredSecondOptions() {
      return this.idOptions.filter(option => option !== this.firstIdRadio);
    }
  },
  watch: {
    // 监听第一个单选组的选中值变化
    firstIdRadio(newVal) {
      // 如果第二个单选组之前选中的正好是被隐藏的选项，清空选中状态
      if (this.secondIdRadio === newVal) {
        this.secondIdRadio = "";
      }
    }
  }
};
</script>

关键说明 #

• 计算属性filteredSecondOptions：每次firstIdRadio变化时，自动过滤掉已选中的选项，返回第二个单选组需要展示的列表，实现实时隐藏效果。
• 监听firstIdRadio：避免用户先选第二个组的某选项，再选第一个组的相同选项时，第二个组残留无效的选中状态（此时该选项已被隐藏）。
• 统一基础数组idOptions：无需维护两个重复的选项数组，减少代码冗余。

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