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中nextTick是什么

    解析VUE中nextTick是什么

    nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致我们对数据的修改不会立刻体现,在DOM变化上,此时如果想要立即获取更新后的DOM状态,就需要使用这个方法,这篇文章主要介绍了解析VUE中nextTick,需要的朋友可以参考下
    2022-11-11
  • Vue之v-on指令和事件监听使用方式

    Vue之v-on指令和事件监听使用方式

    这篇文章主要介绍了Vue之v-on指令和事件监听使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-06-06
  • Vue3中的provide、inject 的用法

    Vue3中的provide、inject 的用法

    这篇文章主要介绍了Vue3中的provide、inject 的用法,需要的朋友可以参考下
    2023-03-03
  • 测试平台开发vue组件化重构前端代码

    测试平台开发vue组件化重构前端代码

    这篇文章主要为大家介绍了测试平台开发vue组件化重构前端代码,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)

    Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)

    这篇文章主要介绍了Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue渲染失败的几种原因及解决方案

    Vue渲染失败的几种原因及解决方案

    这篇文章主要介绍了Vue渲染失败的几种原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue项目从webpack3.x升级webpack4不完全指南

    Vue项目从webpack3.x升级webpack4不完全指南

    前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出来记录一下,已备忘之用,也和大家分享一下,需要的朋友可以参考下
    2019-04-04
  • Vue-CLI3.x 设置反向代理的方法

    Vue-CLI3.x 设置反向代理的方法

    这篇文章主要介绍了Vue-CLI3.x 设置反向代理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue中iframe的使用及说明

    vue中iframe的使用及说明

    这篇文章主要介绍了vue中iframe的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 浅谈Vue 自动化部署打包上线

    浅谈Vue 自动化部署打包上线

    这篇文章主要介绍了浅谈Vue 自动化部署打包上线,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论