前言

最近项目在测试阶段，一旁的业务小哥点击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定义了同样的一个变量的时候，你定义的所有同名的变量都会变

总结

遇到一点错误，就会知道一点东西，多积累吧，加油~~ 各位前端大神有什么见解欢迎大家留言~~~

【VUE】— 视图中两个方法共用同一对象引发的神奇

前言

正文