element-ui的el-radio怎么在已选中的情况下，再次点击取消选中

Question

element-ui的el-radio怎么在已选中的情况下，再次点击取消选中？

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无效，我用@click.native可以点击但是会执行两次

Answer 1

为啥不用 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
},

Answer 2

楼主如果是UE叫你这样做的，建议他回炉再造下..
radiobutton没有这样的交互方式，这样做有违用户的常识体验（想想你在其他应用见过这样的交互方式没..）。

如果你要实现点击后取消，可以实现一组互斥的checkbox，点击其中一个取消其他的选中状态，再次点击取消自己的选中状态。

Answer 3

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
},

Answer 4

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

其中this.radio = x 中的x 不能等于所有子项的值

Answer 5

el-radio 是单选框，如果你有这样的需求建议使用el-checked组件或者el-radio click时改变radio2的值

Answer 6

最好是用checked，checked = ！checked 直接就可以满足你的需求

Answer 7

单选按钮建议用radio 多选用checkbox checkbox用数组存值

Answer 8

麻烦问一下楼主，最后是怎么解决的，我的数据格式和楼主的一样，v-model也是通过v-for循环出来的