Selection and cancellation of a radio button in element

case:

 When we only have one radio button, we need to select and cancel the operation, but if it is not processed, it cannot be canceled at all after selection.

Then I tried to add a click event, where native must be added to trigger native events

<div class="chooseBox" style="padding: 20px; background-color: #f5f6f8">
      <div class="til" style="margin-bottom: 20px">办理情形 （必须）</div>
      <el-radio-group
        v-model="form.radio"
        @click.native="onRadioChange($event)"
      >
        <el-radio label="1">药品批发企业（含零售连锁总部）许可证补发</el-radio>
      </el-radio-group>
    </div>

 

onRadioChange(e) {
      // console.log(e.target.tagName);
      // if (e.target.tagName === "INPUT") {
      //   if (this.form.radio === "") {
      //     this.form.radio = "1";
      //   } else {
      //     this.form.radio = "";
      //   }
      // }
      console.log(this.form.radio);
      console.log(123);
    },

But found that the printing station is triggered twice every time

 Then I searched on the Internet again, and some people said that the click event was changed to this

@click.native.stop.prevent="getCurrentRow(scope.row)"

 So click again, the result becomes like this:

 The style becomes very different, and it will take some time to change it. Isn't there a better way?

Here comes the answer! ! !

<div class="chooseBox" style="padding: 20px; background-color: #f5f6f8">
      <div class="til" style="margin-bottom: 20px">办理情形 （必须）</div>
      <el-radio-group
        v-model="form.radio"
        @click.native="onRadioChange($event)"
      >
        <el-radio label="1">药品批发企业（含零售连锁总部）许可证补发</el-radio>
      </el-radio-group>
    </div>

onRadioChange(e) {
      console.log(e.target.tagName);
      if (e.target.tagName === "INPUT") {
        if (this.form.radio === "") {
          this.form.radio = "1";
        } else {
          this.form.radio = "";
        }
      }
      console.log(123);
    },

Here, let him click twice, but because the elements of each click are different

Because the native click event will be executed twice, the first time is on the label tag, and the second time is on the input tag. At this time, we can use this to distinguish

At this point, you can realize the selection and cancellation of a radio button