How to uncheck the el-radio of element-ui by clicking again when it is already selected?

< H1 > element-ui el-radio how can I click to deselect it again when it is already selected? < / H1 >

<template>
  <el-radio-group v-model="radio2" @change="onRadioChange">
    <el-radio :label="3"></el-radio>
    <el-radio :label="6"></el-radio>
    <el-radio :label="9"></el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio2: 3
      };
    },
    methods:{
        onRadioChange(val){
            console.log(val) // radio
        }
    }
  }
</script>

Click event? It doesn"t work to use @ click directly. I can click on it but execute it twice with @ click.native .

Front-end element-ui vue.js javascript

Mar.20,2021

Why not el-checkbox ?

<el-checkbox-group v-model="checkList" :max="1">
    <el-checkbox label=" A"></el-checkbox>
    <el-checkbox label=" B"></el-checkbox>
    <el-checkbox label=" C"></el-checkbox>
</el-checkbox-group>

data () {
    return {
        checkList: ['A']
    }
}

:
<el-radio-group v-model="radio2">
  <el-radio @click.native.prevent="clickitem(3)" :label="3"> </el-radio>
  <el-radio @click.native.prevent="clickitem(6)" :label="6"> </el-radio>
  <el-radio @click.native.prevent="clickitem(9)" :label="9"> </el-radio>
</el-radio-group>
          
clickitem (e) {
  e === this.radio2 ? this.radio2 = '' : this.radio2 = e
},

if UE asked you to do this, suggest him to go back to the furnace and reproduce.
radiobutton does not have such an interaction, which is against the user's common sense experience. (think about whether you have seen such an interaction in other apps without..).

if you want to click and cancel, you can implement a set of mutually exclusive checkbox, click one of them to uncheck the other, and click again to uncheck your own.

https://blog.csdn.net/w362427.

<el-radio-group v-model="radio2">
  <el-radio @click.native.prevent="clickitem(3)" :label="3"> </el-radio>
  <el-radio @click.native.prevent="clickitem(6)" :label="6"> </el-radio>
  <el-radio @click.native.prevent="clickitem(9)" :label="9"> </el-radio>
</el-radio-group>
          
clickitem (e) {
  e === this.radio2 ? this.radio2 = '' : this.radio2 = e
},

onRadioChange(val){
    if(val === this.radio){
        this.radio = 0
    }
}

where x in this.radio = x cannot be equal to the values of all children

el-radio is the checkbox. If you have such a need, it is recommended to use the el-checked component or el-radio click to change the value of radio2

it is best to use checked,checked =! Checked can directly meet your needs

radio button suggest using radio to choose more checkbox checkbox array stored values

Please ask the landlord how to solve the problem in the end. My data format is the same as that of the landlord, and v-model is also cycled through v-for

Previous: After webpack+babel uses the transform-object-rest-spread plug-in, the size of the main.js file increases several times.

Next: For i in range (2 dint 10): why don't I start with 2?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2b12e-2ba6e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2b12e-2ba6e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?