如何点击取消选中PrimeVue的RadioButton单选按钮？

PrimeVue的RadioButton组件默认不支持点击已选中的选项取消选中，不过可以通过自定义点击事件逻辑实现该需求，核心思路是判断当前点击的选项是否已被选中，若是则将绑定的v-model值置空。

具体实现步骤： #

• 给包含RadioButton和label的容器绑定点击事件，确保点击按钮或文字都能触发取消逻辑
• 编写点击处理方法，判断当前选中值是否等于点击的选项值，若是则将v-model绑定变量设为null（或空字符串，按需调整）

修改后的代码示例： #

<template>
  <div class="field col-12 md:col-12 lg:col-12">
    <template v-for="currency in currencies" :key="currency.id">
      <div 
        v-if="v$.currency.$model !== currency.code" 
        class="flex align-items-center mb-2"
        @click="handleRadioClick(currency.code)"
      >
        <RadioButton 
          v-model="paidInType" 
          :inputId="currency.code" 
          name="payIn" 
          :value="currency.code" 
        />
        <label :for="currency.code" class="ml-2">Pay in {{ currency.symbol }}</label>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import RadioButton from 'primevue/radiobutton';

// 选中状态变量，初始值设为null表示未选中
const paidInType = ref(null);

// 处理单选按钮点击逻辑
const handleRadioClick = (value) => {
  if (paidInType.value === value) {
    // 点击已选中选项，取消选中
    paidInType.value = null;
  }
  // 未选中选项，v-model会自动处理选中，无需额外操作
};

// 以下为业务侧已定义的变量示例，按需替换
// const currencies = ref([...]);
// const v$ = ...;
</script>

注意事项： #

• 确保paidInType初始值为null或空字符串，保证初始无选中状态
• 点击label时，父容器的点击事件会同步触发，保证交互一致性

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