element ui的el-radio踩坑

1.html

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

2.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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