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事件中即可

转载于:https://www.cnblogs.com/samsara-yx/p/11058369.html