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方法里,我们来看看它的具体代码:

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方法的代码改为下面这段:

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改完后使用

this.$nextTick(() => {
              this.changeSelect = true;
            })

把changeSelect 改为true。经过测试,用我改造后的代码就不会有显示错误的问题了。
啊,又是美好的一天~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/589085.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

结合创新!频域+时间序列,预测误差降低64.7%

频域时间序列不仅能提供更丰富的信息,还能提高模型性能和预测准确性。对于论文er来说,是个可发挥空间大、可挖掘创新点多的研究方向。 具体来说: 通过将复杂的时间序列数据转换成简单的频率成分,我们可以更容易地捕捉到数据的周期…

【SpringBoot整合系列】SpringBoot整合Redis[附redis工具类源码]

目录 SpringBoot整合Redis1.下载和安装Redis2.新建工程,导入依赖3.添加配置4.先来几个基本的示例测试代码输出结果用redis客户端查看一下存储内容 5.封装redis工具类RedisKeyUtilRedisStringUtilRedisHashUtilRedisListUtilRedisSetUtilRedisZsetUtil备注 6.测试通用…

nginx--第三方模块安装上传下载服务

第三方模块安装 准备 cd /usr/local/src/ yum install git -y git clone https://github.com/openresty/echo-nginx-module.git cd nginx-1.24.0 yum -y install perl-devel perl-ExtUtils-Embed zlib-devel gcc-c libtool openssl openssl-devel 编译安装 ./configure \--p…

Javascript:Web APIs(一)

Javascript基础(一) Javascript基础(二) Javascript基础(三) Javascript基础已经结束,接下来我们将进入到整个Web API学习中,在此,我们将学习DOM操作,基本的…

32.Docker认识

Docker介绍 Docker是一个快速交付应用,运行应用的技术。 1.可以将程序、依赖、运行环境一起打包为一个镜像,可以迁移到任意Linux操作系统。 2.运行时利用沙箱机制行程隔离容器,各个应用互不干扰。 3.启动、移除都可以通过一行命令完成&am…

多线程基础知识(全面):创建线程、线程状态如何变化、wait()、notify()、sleep()、停止线程

文章目录 一、创建线程的四种方式1.1 继承Thread类1.2 实现runnable接口1.3 实现Callable接口1.4 线程池创建线程1.5 补充:runnable、callable都可以创建线程,有什么区别;run()和 start()有什么区别 二、线程包括哪些状态、状态之间如何变化2…

40.WEB渗透测试-信息收集-域名、指纹收集(2)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:39.WEB渗透测试-信息收集-域名、指纹收集(1) oneforall的安装前置…

《深入解析Windows操作系统》第5章节学习笔记

1、每个Windows进程都是由一个执行体进程EPROCESS结构来表示的,EPROCESS和相关数据结构位于系统空间,但是进程环境控制块PEB是个例外,它位于进程空间地址中(因为它包含了一些需要由用户模式代码来修改的信息)。对于每一…

『跨端框架』Flutter环境搭建

『跨端框架』Flutter环境搭建 资源网站简介跨平台高性能发展历程跨平台框架的比较成功案例 环境搭建(windows)基础环境搭建Windows下的安卓环境搭建Mac下的安卓环境配置资源镜像JDKAndroid StudioFlutter SDK问题一问题二问题三修改项目中的Flutter版本 …

Java中的字符流

字符流字节流编码表 Java为什么可以区分字母和汉字 package day3; ​ import java.io.UnsupportedEncodingException; import java.lang.reflect.Array; import java.util.Arrays; ​ public class Test {public static void main(String[] args) throws UnsupportedEncoding…

【Mybatis 】什么是mybatis?如何在普通项目中使用?(超详细建议收藏)

文章目录 mybatis第一章1、什么是mybatis2、idea中配置环境3、创建一个普通工程 第二章1、mybatis基本步骤2、导入log4j日志3、使用lombok注解4、mapper.xml文件详情1、parameterType属性2、resultType属性 5、对实体包进行扫描6、SQL语句中的占位符及转义符7、接口方法包含多个…

Flutter笔记:Widgets Easier组件库(5)使用加减器

Flutter笔记 Widgets Easier组件库(5):使用加减器 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress…

【校招】校园招聘中的签约环节,面完HR后的流程(意向书,offer选择与三方协议)

【校招】校园招聘中的签约环节,面完HR后的流程(意向书,offer选择与三方协议) 文章目录 一、面完HR后的流程1、口头oc、谈薪(两个电话)2、邮件意向书、带薪offer(两封邮件)3、签三方&…

算法训练营第十三天 | LeetCode 239 滑动窗口最大值、LeetCode 347 前K个高频元素

LeetCode 239 滑动窗口最大值 本体初始思路是这样的,首先看下给定数组长度和维持一个滑动窗口所需要花费的时间复杂度之间的关系。初步判断是还行的,当然后面被样例打脸了。需要更新成优先队列的解法。原本的解法能通过37/51和46/51的测试用例。但这还不…

基于Spring Boot的校园疫情防控系统设计与实现

基于Spring Boot的校园疫情防控系统设计与实现 开发语言:Java框架:springbootJDK版本:JDK1.8数据库工具:Navicat11开发软件:eclipse/myeclipse/idea 系统部分展示 管理员登录首页界面图,管理员进入校园疫…

AI大模型探索之路-训练篇10:大语言模型Transformer库-Tokenizer组件实践

系列篇章💥 AI大模型探索之路-训练篇1:大语言模型微调基础认知 AI大模型探索之路-训练篇2:大语言模型预训练基础认知 AI大模型探索之路-训练篇3:大语言模型全景解读 AI大模型探索之路-训练篇4:大语言模型训练数据集概…

msmpi 高性能并行计算 移植并行细胞自动机报错

报错情况如图 代码来源 元胞自动机生命游戏C语言并行实现 – OmegaXYZ 稍微修改,因为相对路径在 msmpi 10.1.1 中失效 Microsoft Windows [版本 10.0.22000.2538] (c) Microsoft Corporation。保留所有权利。C:\Users\ASUS>mpiexec -n 9 "C:\Users\ASUS\D…

四信数字孪生水库解决方案,加快构建现代化水库运行管理矩阵

近年,水利部先后出台《关于加快构建现代化水库运行管理矩阵的指导意见》与《构建现代化水库运行管理矩阵先行先试工作方案》等文件,明确总体要求及试点水库、先行区域建设技术要求等,为全面推进现代化水库运行管理矩阵建设工作提供依据。 《2…

自定义Maven项目模板Archetype,快速创建模板项目。

自定义Archetype 创建好模板项目,在项目根目录执行命令对模板做出响应调整将模板安装到本地、远程仓库使用自定义模板 创建好模板项目,在项目根目录执行命令 mvn archetype:create-from-project对模板做出响应调整 如果是多模块项目,可能需…

【数据结构】:链表的带环问题

🎁个人主页:我们的五年 🔍系列专栏:数据结构 🌷追光的人,终会万丈光芒 前言: 链表的带环问题在链表中是一类比较难的问题,它对我们的思维有一个比较高的要求,但是这一类…