要素内のラジオボタンの選択と解除

場合：

ラジオボタンが1つしかない場合は、選択して操作をキャンセルする必要がありますが、処理されていない場合は、選択後のキャンセルはまったくできません。

次に、クリックイベントを追加しようとしましたが、ネイティブイベントをトリガーするにはネイティブを追加する必要があります

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

しかし、印刷ステーションが毎回 2 回トリガーされることがわかりました。

そこで再度ネットで調べてみると、クリックイベントをこう変更したという人もいます。

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

もう一度クリックすると、結果は次のようになります。

スタイルは大きく異なり、それを変えるには時間がかかります。もっと良い方法はないでしょうか？

答えはここにあります！！！

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

ここでは 2 回クリックさせますが、各クリックの要素が異なるため、

ネイティブのクリックイベントは2回実行されるため、1回目はlabelタグ上で、2回目はinputタグ上で実行されるので、この時これを利用して区別することができます。

この時点で、ラジオボタンの選択とキャンセルを実現できます。

要素内のラジオボタンの選択と解除

おすすめ