前言
最近项目在测试阶段,一旁的业务小哥点击B/S页面出现了bug,页面第一次加载点击有数据,当再次点击的时候就没有数据了,小哥就说:这跟六脉神剑似的,一会儿灵一会儿不灵的,这是为啥?我回答他:神奇吧!
正文
需求阐述
页面上有两个下拉框,在页面初始化的时候,【工厂名称】下拉框中会加载所有工厂数据,【车间名称】下拉框中会加载所有车间数据;在选中【工厂名称】一项内容时,工厂对应的车间名称会填充【车间名称】一栏,也就是有下拉框联动的效果。
问题描述
页面第一次打开,选中【工厂名称】一项,【车间名称】一栏中有对应数据,点击【查询】表格中会填充响应内容,第二次正常、第三次也正常,偶然的一次,选中【工厂】一栏后,【车间】就没有数据了,数据库是一直都有数据,这就神奇了!
问题追踪
1、下拉框联动方法的问题,可能导致赋值错误 — 看代码
【工厂名称】下拉框联动方法
【根据工厂→ 车间】方法
// <!--根据工厂Guid查询所属车间-->
getWorkShopByPlanGuid(plantGuid){
var vm =this;
vm.item.plantGuid=plantGuid;
axios.post(url + '/Modeler/GetWorkShop', vm.item)
.then(function (response) {
//后台查到数据赋给workShopList 对象
vm.workShopList = response.data;
})
.catch(function (error) {
alert(error);
});
},
workShopList 对象
workShopList:{ workshopGuid:'', workshopName:''}
//循环加载数据,填充到【车间名称】下拉框中
<Option v-for="workShop in workShopList" :value="workShop.workshopGuid" :key="workShop.workshopGuid">{{ workShop.workshopName }}</Option>
断点调试,我一直关注workShopList 对象有没有数据, 有数据但是在页面上不显示;返回值没有问题!
2、难道是页面传值有问题?
带着这个疑问一步步调试,发现真的是页面传值的问题:我定义了一个item 对象用来接收【查询】所需要的数据,当我第一次选择了工厂、选择了车间,item 中的工厂、车间为页面选中的值,点击查询,显示正常;当我第二次只选择了工厂,没有选车间的时候,这个时候还是item 对象,item 中的工厂为这次选的工厂、车间为上次选择的车间,这回的车间和工厂就不配套了,所以没有查到数据,车间才不显示的;
解决方法
重新定义一个对象,用来接收选择的工厂信息,作为参数传到工厂联动的方法中,就可以了;
//重新定义的对象
selectedPlant:{ plantGuid:'', plantName:''}
// <!--根据工厂Guid查询所属车间-->
getWorkShopByPlanGuid(plantGuid){
let vm =this;
//为新对象赋值
vm.selectedPlant.plantGuid =plantGuid;
axios.post(url + '/Modeler/GetWorkShop', vm.selectedPlant)
.then(function (response) {
vm.workShopList = response.data;
})
.catch(function (error) {
alert(error);
});
},
小提醒
建议大家在定义全局变量的时候使用var ,定义局部变量的时候使用let ,let 是es6才有的命令
var 定义的变量,可能定义在一个函数中,大还是当你在别函数中用var定义了同样的一个变量的时候,你定义的所有同名的变量都会变
总结
遇到一点错误,就会知道一点东西,多积累吧,加油~~ 各位前端大神有什么见解欢迎大家留言~~~