vue中radio單選框單擊取消選中狀態

最近在項目實現一個問卷調研的功能，發現正常情況下，多選框是可以單擊取消選中狀態的，單選框就不行，單選框選中了就不能再取消，剛開始自己不知道怎麼解決，然後自己百度了下，果然還是有大神解決了。

1、問題就是將input radio單選框改造成單擊可以取消其選中狀態

2、單純的對input radio進行js控制行不通，因爲radio是通過v-repeat出來的，有很多個，如果每一個都去獲取元素的話，執行效率太低，failed

3、給radio添加click事件，判斷checked屬性，如果爲true則取消checked，但由於radio每次click都會將自己的checked置爲true（Vue的數據雙向綁定速度也是很快的），數據賦值速度之快以至於每次click獲取到的checked值都爲true，failed

4、當一個radio從未選中到選中狀態，會先觸發click再觸發change事件，因此只要在click事件判斷當前radio是否觸發了change事件，如果沒觸發change事件說明當前radio是選中狀態，此時則把該radio的checked置爲false，就可以實現單擊選中狀態的radio取消其選中狀態

5、以上第4點有一個邏輯漏洞，因爲click先觸發，change後觸發，那如何在click中判斷當前radio是否觸發了change呢？需要將click事件中的js判斷邏輯手動放到change觸發之後執行，則將click中的邏輯放在setTimeout延遲0秒，手動將這段邏輯執行排在了change事件隊列的後面

賦上vue代碼如下：

//tempalta裏面的單選框
<input
  type="radio"
 :value="qitem.optionValue"
  class="radio float-left"
  @change="retainRecord"
  @click="controlSingel($event)"
  :checked="changed"
 />
 // data裏定義changed，
 //methods
   controlSingel($event) {
      let _this = this;
      window.setTimeout(() => {
        if (!this.changed) {
          $event.target.checked = false
           // 可以寫些單選框沒有選中的代碼處理
        } 
        _this.changed = false;
      }, 0);
   },
   retainRecord(){
      // 可以寫些單選框選中的代碼處理
      this.changed = true;
   }

以上是本人實踐，根據別人的鏈接說還可以將它封裝爲一個vue的指令，我這邊暫時還沒去實踐到，所以沒寫進去。以上感覺還有些東西要優化，明天有空的話，可以自己再測下。
參考的鏈接：https://zhuanlan.zhihu.com/p/27130030?utm_source=wechat_session&utm_medium=social&s_s_i=wj4pPqmkaQX0sycM%2FWY0%2B%2BYGK5kx%2FAtls%2BqvpXR%2FrPg%3D&s_r=1