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

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