vue select 下拉框 联动

（1）三个下拉框，第二个和第三个都需要第一个下拉框的数据id才能通过接口请求到数据

（2）遇到的问题，二、三下拉框的数据更新不同步

（3）鼠标点击二次才能将下拉框弹出

<template>
<ul class="h45">
 
                    <li class="left" >
                        <p class="left text-right w100 fc-4 mt10">部门</p>
                        <p class="row-box">
                            <select id="workergroupid" v-on:change="choosegroup($event.target)" class="form-control w200">
                            <option value="">请选择部门</option>
                            <option v-for="item in grouplist" v-bind:value="item.group_id">{{ item.group_name }}</option>
                            </select>
                        </p>
                    </li>
 
                    <li class="left">
                        <p class="left text-right w100 fc-4 mt10">职位</p>
                        <p class="row-box">
                            <select id="workerroleid" name="workerroleida"  class="form-control w200" >
                                <option>请选择职位</option>
                                <option v-for="roleitem in rolelist" v-bind:value="roleitem.role_id">{{roleitem.role_name}}</option>
                            </select>
 
                        </p>
                    </li>    
 
 
                    <li class="left">
                        <p class="left text-right w100 fc-4 mt10">上级</p>
                        <p class="row-box">
                            <select id="workerpidid" name="workerroleidb"  class="form-control w200">
                                <option>请选择上级</option>
                                <option v-for="piditem in pidlist" v-bind:value="piditem.worker_id">{{piditem.role_name}}-{{piditem.worker_name}}</option>
                            </select>
                        </p>
                    </li>    
 
                </ul></template>

 

<script>
  export default {
 
      data (){
          return{
              groupid:"",
              grouplist:[],
              pidlist:[],
              rolelist:[]
          }
      },
 
      mounted:function(){
          this.getgrouplist()
          
      },
 
      methods:{
        getgrouplist(){
            
            var sendData = {};
            var jsonData = {};
                sendData.url ="www.baidu.com";
                jsonData.token = "1111111111111111";
                jsonData.phone = "111111111111";
            sendData.data = jsonData;
            $.ajax({
                url:"http://www.baidu.com/abc.php",
                data:sendData,
                dataType:"Json",
                success:function(re){    
                    this.grouplist=re.data;
                    
                }.bind(this)
            });
        },
    
        choosegroup(obj){
            
            var that=this;
            this.groupid=obj.value;
            /*this.$options.methods.chooserole(this.groupid);
            this.$options.methods.choosepid(this.groupid);*/
            //this.$options.methods.choosepid(this.groupid);
            //console.log(this.pidlist);
 
            var sendData = {};
            var jsonData = {};
            sendData.url ="www.baidu.com";
            jsonData.token = "1111111111111111";
            jsonData.phone = "111111111111";
            jsonData.group_id=this.groupid;
            sendData.data = jsonData;
            $.ajax({
                url:"http://www.baidu.com/abc.php",
                data:sendData,
                dataType:"Json",
                success:function(re){
                    if(re.status==1){
                        var abc=re.data;
                        for(var $i=0;$i<abc.length;$i++){
                            that.rolelist.push(abc[$i]);
                        }        
                    }else{
                        layer.msg(re.msg);
                    }
                }
            });
            if(obj.value){
                
                var vm=this;
                var sendData = {};
                var jsonData = {};
                sendData.url ="www.baidu.com";
                jsonData.token = "1111111111111111";
                jsonData.phone = "111111111111";
                jsonData.group_id=this.groupid;
                sendData.data = jsonData;
                $.ajax({
                    url:"http://www.baidu.com/abc.php",
                    data:sendData,
                    dataType:"Json",
                    success:function(re){
                        if(re.status==1){
                            var abc=re.data;
                            for(var $i=0;$i<abc.length;$i++){
                                vm.pidlist.push(abc[$i]);
                            }        
                        }else{
                            layer.msg(re.msg);
                        }
                    }
                });
            }else{
                console.log("错误");
            }
 
        
 
 
        },
</script>

 

备注：push 不是一个方法，  大部分情况是 this的指向问题