element ui的el-radio踩坑

Posted 2022-01-27 samsara-yx

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