vue3 element plus中el-radio选中之后再次点击取消选中问题

 更新时间:2024年08月16日 09:33:44   作者:学习鸭  
这篇文章主要介绍了vue3 element plus中el-radio选中之后再次点击取消选中问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3 中el-radio再次点击取消选中

Change 事件

radio 暴露出来的只有一个 change 事件,

通过调试发现:

点击已经选择的 Radio ,不会触发 Change 事件

Click 事件

click会执行两次,使用e.target.tagName == 'INPUT’来判断让他只执行一次,

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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 前端框架Vue.js构建大型应用浅析

    前端框架Vue.js构建大型应用浅析

    这篇文章主要为大家详细介绍了前端框架Vue.js构建大型应用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 在Nginx上部署前端Vue项目的详细步骤(超级简单!)

    在Nginx上部署前端Vue项目的详细步骤(超级简单!)

    这篇文章主要介绍了在Nginx上部署前端Vue项目的详细步骤,Nginx是一款高效的HTTP和反向代理Web服务器,作为开源软件,Nginx以其高性能、可扩展性和灵活性广泛应用于Web架构中,文中将步骤介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • VsCode新建VueJs项目的详细步骤

    VsCode新建VueJs项目的详细步骤

    本篇文章主要介绍了VsCode新建VueJs项目的详细步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    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 自适应高度的实现示例

    Element Table 自适应高度的实现示例

    el-table的高度不能适应不同电脑的分辨率,也不能跟随浏览器的高度变化而变化的问题,本文就来解决一下Element Table 自适应高度,感兴趣的可以了解一下
    2024-07-07
  • vue+mockjs模拟数据实现前后端分离开发的实例代码

    vue+mockjs模拟数据实现前后端分离开发的实例代码

    本篇文章主要介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue + axios get下载文件功能

    vue + axios get下载文件功能

    这篇文章主要为大家详细介绍了vue + axios get下载文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 前端vue中实现嵌入代码编辑器的详细代码

    前端vue中实现嵌入代码编辑器的详细代码

    随着Web技术的不断发展,前端开发也正日新月异,下面这篇文章主要给大家介绍了关于前端vue中实现嵌入代码编辑器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • Vue六大基本类型中的原始值响应式

    Vue六大基本类型中的原始值响应式

    原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值,在 JavaScript 中,原始值是按值传递的,引用类型是按引用传递的,这意味着,如果一个函数接收了一个原始值作为参数,那么形参和实参之间是没有引用关系的,它们是完全独立的两个值
    2023-01-01

最新评论