van-cascader(vant2)异步加载的bug

问题描述:由于一次性返回所有的级联数据的话,数据量太大,接口响应时间太久,因此采用了异步加载的方案,看了vant的官方示例代码,照着改了下,很轻松地实现了功能。正当我感叹世界如此美好的时候,测试人员就给我提了个bug,说选择的数据跟页面显示的数据对不上,我马上进行了自测,发现确实存在这个问题。我做的是个房产选择的一个级联选择器,得先选择小区,然后选楼栋,最后选房产,第一次选择的时候是没问题的,但第二次选择就会出现问题了。比如我选了小区1,再选了楼栋1,这时候再返回去选择小区2,然后再选择小区2下的某一楼栋,比如楼栋2,这时候就有问题了,已选择的数据就会变成了小区1,楼栋1,然后页面可选择的房产也变成了楼栋1下的所有房产了,正常的情况应该是已选择的数据是小区2,楼栋2,页面可选择的房产是楼栋2下的所有房产。

我一开始以为是我自己写的代码有问题,检查了好久,查找了好多资料,都没解决这个问题。没办法只能去看van-cascader这个组件的代码了,打开对应的js文件,以下这段代码立马引起了我的注意:

这个options就是我们传进来的级联数据,它深度监听了options的变动,一旦改变就会去调用updateTabs方法,那我每次选择了小区或者楼栋的时候就会去改变options,所以肯定会触发updateTabs方法,如果不出意外的话,问题肯定是在updateTabs方法里,我们来看看它的具体代码:

javascript 复制代码
function updateTabs() {
      var _this2 = this;

      if (this.value || this.value === 0) {
        var selectedOptions = this.getSelectedOptionsByValue(this.options, this.value);

        if (selectedOptions) {
          var optionsCursor = this.options;
          this.tabs = selectedOptions.map(function (option) {
            var tab = {
              options: optionsCursor,
              selectedOption: option
            };
            var next = optionsCursor.filter(function (item) {
              return item[_this2.valueKey] === option[_this2.valueKey];
            });

            if (next.length) {
              optionsCursor = next[0][_this2.childrenKey];
            }

            return tab;
          });

          if (optionsCursor) {
            this.tabs.push({
              options: optionsCursor,
              selectedOption: null
            });
          }

          this.$nextTick(function () {
            _this2.activeTab = _this2.tabs.length - 1;
          });
          return;
        }
      }

      this.tabs = [{
        options: this.options,
        selectedOption: null
      }];
    },

问题就出现在这段代码:

一旦options改变就会执行这段代码,然后tabs就会变成上一次所选择的数据了,导致页面也显示了上一次的数据。

我想到的解决方法就是给这个组件再传一个参数,用来表示要不要执行这段代码的一个标志,具体做法如下:

在props增加一个参数:

将updateTabs方法的代码改为下面这段:

javascript 复制代码
function updateTabs() {
      var _this2 = this

      if (this.value || this.value === 0) {
        var selectedOptions = this.getSelectedOptionsByValue(this.options, this.value)

        if (selectedOptions) {
          if(this.changeSelect) {
            var optionsCursor = this.options

            this.tabs = selectedOptions.map(function(option) {
              var tab = {
                options: optionsCursor,
                selectedOption: option
              }
              var next = optionsCursor.filter(function(item) {
                return item[_this2.valueKey] === option[_this2.valueKey]
              })
  
              if (next.length) {
                optionsCursor = next[0][_this2.childrenKey]
              }
  
              return tab
            })
  
            if (optionsCursor) {
              this.tabs.push({
                options: optionsCursor,
                selectedOption: null
              })
            }
          }
          this.$nextTick(function() {
            _this2.activeTab = _this2.tabs.length - 1
          })
          return
        }
      }

      this.tabs = [
        {
          options: this.options,
          selectedOption: null
        }
      ]
    },

然后在使用这个组件的时候记得把changeSelect传进来,在修改options 之前把changeSelect的值改为false,当options改完后使用

javascript 复制代码
this.$nextTick(() => {
              this.changeSelect = true;
            })

把changeSelect 改为true。经过测试,用我改造后的代码就不会有显示错误的问题了。

啊,又是美好的一天~~

相关推荐
爱吃的强哥5 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安14 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板20 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩21 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真26 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记