vue select 下拉框 聯動
阿新 • • 發佈:2019-02-07
(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的指向問題