vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題
更新時間：2024年08月16日 09:33:44 作者：學(xué)習(xí)鴨
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3 中el-radio再次點(diǎn)擊取消選中
Change 事件
radio 暴露出來的只有一個 change 事件，
通過調(diào)試發(fā)現(xiàn)：
點(diǎn)擊已經(jīng)選擇的 Radio ，不會觸發(fā) Change 事件
Click 事件
click會執(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é)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
在Nginx上部署前端Vue項(xiàng)目的詳細(xì)步驟(超級簡單!)
這篇文章主要介紹了在Nginx上部署前端Vue項(xiàng)目的詳細(xì)步驟,Nginx是一款高效的HTTP和反向代理Web服務(wù)器,作為開源軟件,Nginx以其高性能、可擴(kuò)展性和靈活性廣泛應(yīng)用于Web架構(gòu)中,文中將步驟介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
VsCode新建VueJs項(xiàng)目的詳細(xì)步驟
本篇文章主要介紹了VsCode新建VueJs項(xiàng)目的詳細(xì)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue 使用高德地圖vue-amap組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vuex中使用modules時遇到的坑及問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例
el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問題,本文就來解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下2024-07-07
vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue + axios get下載文件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個函數(shù)接收了一個原始值作為參數(shù)，那么形參和實(shí)參之間是沒有引用關(guān)系的，它們是完全獨(dú)立的兩個值2023-01-01