iView‐Radio Button 取消選取的問題 - daniel-qa/Vue GitHub Wiki

無法解決取消重覆點擊的問題，下面是紀錄

watch / computed 也無法幫忙，因為重複點擊不會改變 v-model → watch 不觸發

換句話說，要正確抓重複點擊，需要用 純 click 事件 + 手動控制選中值 的方式，不依賴 v-model 自動更新。

「使用者點擊的這個值，什麼時候才抓得到？」

答案是：就是在 DOM click 事件發生的那一刻。

但在 click 裡直接改 v-model，會被 iView 的內部更新覆蓋掉

==> 值永考不會更新

方法 1：綁在 RadioGroup 的 @on-click（官方事件）

iView 官方提供了 RadioGroup @on-click：

<Radio-group v-model="button1" type="button" @on-click="handleClick">
  <Radio label="北京">北京</Radio>
  <Radio label="上海">上海</Radio>
</Radio-group>

iView Radio 的「硬限制」你踩到了

官方行為（設計如此，不是你寫錯）

Radio-group 一定會保證「永遠有一個值或空值」

但 點擊已選中的 Radio，不會幫你清空

v-model 的更新時機 在 click 之後

當 v-model 在 click 之後才更新時，你在 click handler 裡看到的值，一定是「舊的」。

你現在踩到的 bug，99% 都是從這裡長出來的

只要 v-model 是「click 之後才更新」，那就「不要在 click handler 裡處理狀態判斷」

  • 方法(最推薦）：你自己控制狀態的地方

👉 換句話說：不要用 v-model

Radio-group 用 :value

狀態變更只在你自己的 method 裡發生

<Radio-group :value="selectedSchoolId">
  <Radio
    v-for="school in schools"
    :key="school.id"
    :label="school.id"
    @click.native.stop="toggleSchool(school.id)"
  >
    {{ school.name }}
  </Radio>
</Radio-group>

toggleSchool(id) {
  this.selectedSchoolId =
    this.selectedSchoolId === id
      ? ''
      : id
}

為什麼這是王道？

你不依賴元件內部時序

沒有「舊值 / 新值」問題

行為完全可預期

UX 規則 = 業務邏輯（而不是 UI hack）

👉 99% 這類需求都該走這條

⚠️ **GitHub.com Fallback** ⚠️