日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

取消radio的選中狀態

作者:明月松江 更新時間: 2022-01-30 編程語言

radio一旦選中一般是取消不了選中狀態的,但是可以通過js操作數據的方式實現。

以element-ui的radio組件為例,可以給radio增加一個native后綴去監聽原生的點擊事件(不加無法監聽點擊),增加一個prevent后綴去除radio組件原來自帶的行為來執行新的邏輯。當點擊的時候,如果當前點擊的選項還沒有被選中過,那么給v-model綁定的值賦值為當前選中的選項的值,如果當前點擊的選項已經選中了,那么v-model綁定的值就重置為空,這樣就可以實現***取消radio的選中狀態***的效果了。

以下是代碼:

<div v-for="(item, infoIndex) in formData.hots" :key='infoIndex' class="product-item">
  <el-radio-group v-model="item.label">
    <el-radio :label="0" @click.native.prevent="clickRadioItem(0,infoIndex)">熱</el-radio>
    <el-radio :label="1" @click.native.prevent="clickRadioItem(1,infoIndex)">新</el-radio>
  </el-radio-group>
</div>

data() {
  return {
    formData: {
      hots: []
    },
  };
}


methods: {
  clickRadioItem(e, index) {
    if (this.formData.hots[index].label === e) {
      this.formData.hots[index].label = null
    } else {
      this.formData.hots[index].label = e
    }
  }
}

原文鏈接:https://blog.csdn.net/u010007013/article/details/115617627

欄目分類
最近更新