如何取消点击Primevue的单选按钮？

Answer 1

单选按钮并不意味着不可选择。

请针对您的用例使用复选框或切换组件，并根据您的需要重新设计它们。

但是如果您确实需要覆盖默认的单选按钮操作，则添加 @click 方法来删除所选值（如果其等于单击的单选按钮值）。

Answer 2

从 UI/UX 角度来看，您不应该将单选按钮留空。这就是为什么 PrimeVue 无线电组件没有

required

属性（只是假设需要）。这种行为已经成为几十年来的标准，即必须选择一个单选选项，即使该选项是“不适用”或“不想说”等。如果您确实需要取消选择，请首先考虑使用不同的组件。

如果您确实想取消选择单选按钮，您需要做的就是在选择事件时将 v-model 设置回默认的未选择值状态。由于您需要首先确认新选择的值与之前的值相同，因此您需要始终跟踪之前的值。

const paidInType = ref('');
const prevValue = ref('');

function selectRadio(value) {
  if (prevValue.value === paidInType.value) {
    paidInType.value = '';
  }
}

<RadioButton
  v-model="paidInType"
  @click="prevValue = paidInType"
  @update:modelValue="selectRadio(currency.code)"
  :inputId="currency.code"
  name="payIn"
  :value="currency.code"
/>

stackblitz 演示