欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3 element plus中el-radio選中之后再次點擊取消選中問題

 更新時間:2024年08月16日 09:33:44   作者:學習鴨  
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點擊取消選中問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 中el-radio再次點擊取消選中

Change 事件

radio 暴露出來的只有一個 change 事件,

通過調(diào)試發(fā)現(xià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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 前端框架Vue.js構(gòu)建大型應用淺析

    前端框架Vue.js構(gòu)建大型應用淺析

    這篇文章主要為大家詳細介紹了前端框架Vue.js構(gòu)建大型應用的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 在Nginx上部署前端Vue項目的詳細步驟(超級簡單!)

    在Nginx上部署前端Vue項目的詳細步驟(超級簡單!)

    這篇文章主要介紹了在Nginx上部署前端Vue項目的詳細步驟,Nginx是一款高效的HTTP和反向代理Web服務器,作為開源軟件,Nginx以其高性能、可擴展性和靈活性廣泛應用于Web架構(gòu)中,文中將步驟介紹的非常詳細,需要的朋友可以參考下
    2024-10-10
  • VsCode新建VueJs項目的詳細步驟

    VsCode新建VueJs項目的詳細步驟

    本篇文章主要介紹了VsCode新建VueJs項目的詳細步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue 使用高德地圖vue-amap組件過程解析

    vue 使用高德地圖vue-amap組件過程解析

    這篇文章主要介紹了vue 使用高德地圖vue-amap組件過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-09-09
  • vuex中使用modules時遇到的坑及問題

    vuex中使用modules時遇到的坑及問題

    這篇文章主要介紹了vuex中使用modules時遇到的坑及問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Element Table 自適應高度的實現(xiàn)示例

    Element Table 自適應高度的實現(xiàn)示例

    el-table的高度不能適應不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問題,本文就來解決一下Element Table 自適應高度,感興趣的可以了解一下
    2024-07-07
  • vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼

    vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼

    本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼,具有一定的參考價值,有興趣的可以了解一下
    2017-08-08
  • vue + axios get下載文件功能

    vue + axios get下載文件功能

    這篇文章主要為大家詳細介紹了vue + axios get下載文件功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • 前端vue中實現(xiàn)嵌入代碼編輯器的詳細代碼

    前端vue中實現(xiàn)嵌入代碼編輯器的詳細代碼

    隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-07-07
  • Vue六大基本類型中的原始值響應式

    Vue六大基本類型中的原始值響應式

    原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值,在 JavaScript 中,原始值是按值傳遞的,引用類型是按引用傳遞的,這意味著,如果一個函數(shù)接收了一個原始值作為參數(shù),那么形參和實參之間是沒有引用關(guān)系的,它們是完全獨立的兩個值
    2023-01-01

最新評論