vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題
更新時(shí)間：2024年08月16日 09:33:44 作者：學(xué)習(xí)鴨
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3 中el-radio再次點(diǎn)擊取消選中
Change 事件
radio 暴露出來的只有一個(gè) change 事件，
通過調(diào)試發(fā)現(xiàn)：
點(diǎn)擊已經(jīng)選擇的 Radio ，不會(huì)觸發(fā) Change 事件
Click 事件
click會(huì)執(zhí)行兩次，使用e.target.tagName == 'INPUT’來判斷讓他只執(zhí)行一次，
e.srcElement.defaultValue拿到選中值
<template>
<el-radio-group v-model="radioVal" @click="clickitem($event)">
<el-radio label="1" >Option A</el-radio>
<el-radio label="2">Option B</el-radio>
<el-radio label="3" >Option C</el-radio>
</el-radio-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio = ref()
const clickitem=(e)=>{
if(e.target.tagName == 'INPUT'){
e.srcElement.defaultValue === radioVal.value ? (radioVal.value = "") : (radioVal.value = e.srcElement.defaultValue);
}
}
</script>
<el-radio-group v-model="formData[`arr${[index]}`]">
<el-radio
v-for="i in item.dictValues"
:key="i"
:label="`${i},${item.id}`"
@click="radioChange($event,index)"
>{{ i }}</el-radio
>
</el-radio-group>
<script lang="ts">
const radioChange= (e,index)=> {
if(e.target.tagName == 'INPUT'){
// console.log(23,e.srcElement.defaultValue,index,formData[`arr${[index]}`]);
e.srcElement.defaultValue === formData[`arr${[index]}`] ? (formData[`arr${[index]}`] = "") : (formData[`arr${[index]}`] = e.srcElement.defaultValue);
}
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對(duì)數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue之v-on指令和事件監(jiān)聽使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
這篇文章主要介紹了Vue3中的provide、inject 的用法,需要的朋友可以參考下2023-03-03
測(cè)試平臺(tái)開發(fā)vue組件化重構(gòu)前端代碼
這篇文章主要為大家介紹了測(cè)試平臺(tái)開發(fā)vue組件化重構(gòu)前端代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))
這篇文章主要介紹了Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue渲染失敗的幾種原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue項(xiàng)目從webpack3.x升級(jí)webpack4不完全指南
前段時(shí)間，泡面將自己的一個(gè)Vue-cli構(gòu)建的前端框架從webpack3.x升級(jí)到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue中iframe的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了淺談Vue 自動(dòng)化部署打包上線，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06