element el-radio-group 点击触发两次方法的解决方法

需求一开始是这样的，我点击一个单选按钮然后触发事件，请求接口获取数据，但是我点击了el-radio-group 中的 el-radio 发现事件每次都是触发了两次，就觉得很奇怪

奇怪的图

<template>
  <div class="container">
    <el-radio-group v-model="test">
      <el-radio :label="0" @click.native="test1()">测试按钮1</el-radio>
      <el-radio :label="1" @click.native="test2()">测试按钮2</el-radio>
      <el-radio :label="2" @click.native="test3()">测试按钮3</el-radio>
    </el-radio-group>
    <div v-show="test == 0">11111111111111111111111</div>
    <div v-show="test == 1">222222222222</div>
    <div v-show="test == 2">3333333333333333</div>
  </div>
</template>

methods: {
 test1() {
    console.log(111)
 },
 test2() {
    console.log(22222)
  },
  test3() {
    console.log(3333)
  },
}

查看控制台

 然后经过了百度是说@click是会触发el-radio-group 的label和input两个，这就是触发两次事件的原因

解决

两种方法：

第一种 @click 换成@change 代码不用动太多，轻松解决

<template>
  <div class="container">
    <el-radio-group v-model="test">
      <!-- @click 换成 @change 解决问题 -->
      <el-radio :label="0" @change.native="test1()">测试按钮1</el-radio>
      <el-radio :label="1" @change.native="test2()">测试按钮2</el-radio>
      <el-radio :label="2" @change.native="test3()">测试按钮3</el-radio>
    </el-radio-group>
    <div v-show="test == 0">11111111111111111111111</div>
    <div v-show="test == 1">222222222222</div>
    <div v-show="test == 2">3333333333333333</div>
  </div>
</template>

 methods: {
   test1() {
      console.log(111)
   },
   test2() {
      console.log(22222)
   },
   test3() {
      onsole.log(3333)
    },
}

查看控制台

 第二种方法,写多了挺多代码的

<template>
  <div>
    <el-radio-group v-model="test">
      <el-radio :label="0" @click.native="test1($event, '0')">测试按钮1</el-radio>
      <el-radio :label="1" @click.native="test2($event, '1')">测试按钮2</el-radio>
      <el-radio :label="2" @click.native="test3($event, '2')">测试按钮3</el-radio>
    </el-radio-group>
    <div v-show="test == 0">11111111111111111111111</div>
    <div v-show="test == 1">222222222222</div>
    <div v-show="test == 2">3333333333333333</div>
  </div>
</template>



methods: {
  test1(e, val) {
    if (e.target.tagName === "INPUT") {
        return
     } else {
        console.log(111)
     }
   },
   test2(e, val) {
     if (e.target.tagName === "INPUT") {
        return
     } else {
          console.log(22222)
     }
   },
   test3(e, val) {
     if (e.target.tagName === "INPUT") {
        return
     } else {
          console.log(3333)
     }
   },
}

                                                     查看控制台

 ojbk,问题解决，nice,666