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 >
  1. <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>
  2. Click event? It doesn"t work to use @ click directly. I can click on it but execute it twice with @ click.native .

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

.
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-1bdf8fa-45a1a.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-1bdf8fa-45a1a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?