element ui的el-radio踩坑

1.html

1 <div class="listPeopleDetail">
2     <div class="item" v-for="(item, index) in freeEmpList" :key="index">
3         <div class="name" v-cloak>{{item.empName}}</div>
4         <div class="number" v-cloak>剩余单数：{{item.orderCount}}单</div>
5         <div class="radio" @click="openAddOrder">
6             <el-radio v-model="checkedPeople" :label="item.empId"></el-radio>
7         </div>
8     </div>
9 </div>

2.js

openAddOrder:function(){
     this.dialogVisible=true;
      this.getAreaInfoAddOrderListMon()
 },

getAreaInfoAddOrderListMon:function(){
      this.$http.get("/esmart/getAreaInfoAddOrderListMon",{
         empId:vm.checkedPeople,
         radius:vm.radius,
         operDate:vm.operDate
         }).then(function(res){
             if (res.body.code == 0 && res.body.data !== null) {
                   console.log(res)
                   vm.addOrderList=res.body.data;
          }).catch(function(err){
                console.log(err)
           })
},

　　

本来先做的是，点击radio后出现弹窗，并且调用一个接口来初始化弹窗的数据，最初在radio外面的div加了一个click事件，发现接口会调用两次，控制台会打印两边，解决方法

1）把外层div的点击事件去掉，改为radio的change事件

2）还是用外层div的click事件，但是调用接口的时候写在弹框的open事件中即可