el-radio单选框的选中与取消

需求是有一个单选框，点击选中，再次点击取消。

第一次写的时候代码如下：

<el-radio-group v-model="keyForm.highlight">
  <el-radio
    :value="true"
    @click="handleClick"
    >是</el-radio
  >
</el-radio-group>

handleClick() {
  this.keyForm.highlight = !this.keyForm.highlight
  console.log(this.keyForm.highlight)
},

结果为：第一次点击时选中，之后多次点击都是选中，且控制台输出为false。这很奇怪？？

true
false
false
false
...

查阅资料发现这是因为：原生click事件会执行两次，第一次在label标签上，第二次在input标签

因此，我们需要阻止默认事件的发生即可：

 <el-form-item
   label="是否突出"
   prop="highlight"
 >
   <el-radio-group v-model="keyForm.highlight">
     <el-radio
       :value="true"
       @click.prevent="keyForm.highlight = !keyForm.highlight"
       >是</el-radio
     >
   </el-radio-group>
 </el-form-item>

也可以直接用el-checkbox