ラジオボタンで選択解除をする（v-radio-group, v-radio）

vuetifyのv-radio-group/v-radioを使ったラジオボタンの実装において、現在選択されているものをクリック/タップした場合に選択解除する

選択を解除するというとラジオボタンの意図から外れると思うのでフォーム設計を見直すのがベターですが、やる必要が出た時用メモ

バージョン

nuxt3, vuetify3

"nuxt": "^3.2.3"
"vuetify": "^3.1.7"

実装

sample.vue

<template>
  <v-radio-group v-model="hoge" @click="clearRadioSelected($event, 'hoge')">
    <v-radio label="はい" value="1"></v-radio>
    <v-radio label="いいえ" value="2"></v-radio>
  </v-radio-group>
  <v-radio-group v-model="fuga" @click="clearRadioSelected($event, 'fuga')">
    <v-radio label="YES" value="1"></v-radio>
    <v-radio label="NO" value="2"></v-radio>
  </v-radio-group>
</template>

<script setup lang="ts">
const hoge = ref();
const fuga = ref();
const clearRadioSelected = (event: Event, target: string) => {
  if (event.target instanceof HTMLInputElement && event.target.type === "radio" && event.target.tagName === "INPUT") {
    const value = event.target.value;
    switch (target) {
      case "hoge":
        hoge.value = value && value === hoge.value ? undefined : value;
        break;
      case "fuga":
        fuga.value = value && value === fuga.value ? undefined : value;
        break;
    }
  }
};
</script>