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

学习鸭

已于 2023-09-19 11:33:43 修改

阅读量3.3k

点赞数 3

文章标签： javascript 前端 vue.js

于 2023-09-19 11:21:09 首次发布

本文链接：https://blog.csdn.net/weixin_47451403/article/details/133018227

版权

文章讲述了在Vue3中，如何解决el-radio组件点击已选中的选项不触发change事件的问题，以及如何通过click事件仅执行一次并正确更新选中值。

摘要由CSDN通过智能技术生成

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>