element中一个单选框radio时的选中和取消

案例:

 当我们只有一个单选框时,需要进行选中和取消的操作,但如果不经过处理,选中后就根本取消不了。

然后我试了一下加了点击事件,这里必须要加 native  ,触发原生事件

办理情形 (必须)
药品批发企业(含零售连锁总部)许可证补发

 

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

但发现打印台每次都触发两次

element中一个单选框radio时的选中和取消_第1张图片

 然后我又在网上找,有人说点击事件改成这样

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

 于是再次点击,结果变成了这样:

element中一个单选框radio时的选中和取消_第2张图片

 样式变得区别好大,改的话又要花费一些时间。难道就没有一个更好的方法吗?

答案来了!!!

办理情形 (必须)
药品批发企业(含零售连锁总部)许可证补发
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);
    },

这里的话就让他点击两次,但是因为每次点击的元素都不一样

因为原生click事件会执行两次,第一次在label标签上,第二次在input标签, 这个时候我们就可以以这个来区分

此时就可以实现了一个单选框时的选中和取消了

你可能感兴趣的:(javascript,前端,vue.js,elementui)