element-plus 的 el-radio-group 组件选中一个值之后通过selectedColor.value = ''无法取消选中？

Question

<template>
  <el-radio-group v-model="selectedColor">
    <el-radio-button v-for="color in colors" :key="color" :label="color" @click="toggleColor(color)">{{ color }}</el-radio-button>
  </el-radio-group>
</template>

<script setup>
import { ref } from 'vue';

const colors = ref(['红色', '绿色', '蓝色']);
const selectedColor = ref('');

const toggleColor = (color) => {
  if (selectedColor.value === color) {
    selectedColor.value = ''; // 取消选中
  } else {
    selectedColor.value = color; // 选中
  }
};
</script>

尝试过 selectedColor.value = ''，但是在选中一次之后依旧无法取消选中

期望的结果：element-plus 的 el-radio-group 组件选中一个值之后通过selectedColor.value = ''或其他方式可以取消选中

Answer 1

<template>
  <el-radio-group :model-value="selectedColor">
    <el-radio-button v-for="color in colors" :key="color" :label="color" @click="toggleColor(color)">{{ color }}</el-radio-button>
  </el-radio-group>
</template>

<script setup>
import { ref } from 'vue';

const colors = ref(['红色', '绿色', '蓝色']);
const selectedColor = ref('');

const toggleColor = (color) => {
  if (selectedColor.value === color) {
    selectedColor.value = ''; // 取消选中
  } else {
    selectedColor.value = color; // 选中
  }
};
</script>

playground

Answer 2

<template>
  <el-radio-group v-model="selectedColor">
    <el-radio-button
      v-for="color in colors"
      :key="color"
      :label="color"
      @click.native.prevent="handleClick(color)"
    >
      {{ color }}
    </el-radio-button>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      colors: ['红色', '绿色', '蓝色'],
      selectedColor: ''
    };
  },
  methods: {
    handleClick(color) {
      // 强制手动切换选中状态
      if (this.selectedColor === color) {
        this.selectedColor = '';
      } else {
        this.selectedColor = color;
      }
      // 兼容 Element UI 低版本：强制更新组件状态
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    }
  }
};
</script>