SoFunction
Updated on 2025-04-05

vue3 element                                                             �

Click el-radio again in vue3 to uncheck

Change Events

radio only exposed one change event.

Through debugging, it was found:

Clicking on the already selected Radio will not trigger the Change event

Click Event

Click will be executed twice, and use == 'INPUT' to determine that it will only execute once.

Get the selected value

<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( == 'INPUT'){        
  ===  ? ( = "") : ( = );
      }
    }
</script>
 <el-radio-group v-model="formData[`arr${[index]}`]">
            <el-radio
              v-for="i in "
              :key="i"
              :label="`${i},${}`"
              @click="radioChange($event,index)"
              >{{ i }}</el-radio
            >
          </el-radio-group>
<script lang="ts">
  const radioChange= (e,index)=> {
     if( == 'INPUT'){
      // (23,,index,formData[`arr${[index]}`]);
       === formData[`arr${[index]}`] ? (formData[`arr${[index]}`] = "") : (formData[`arr${[index]}`] = );
    }
    }
</script>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.