Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue下拉选i-select无法选取“全部”,无法赋值为空串''的诡异bug

vue下拉选i-select无法选取“全部”,无法赋值为空串''的诡异bug

作者头像
Java深度编程
发布于 2020-06-10 04:20:17
发布于 2020-06-10 04:20:17
1.5K0
举报
文章被收录于专栏:Java深度编程Java深度编程

这是一个让人头皮发麻,全身慎得慌的诡异bug,因为它不符合科学逻辑,违反常理。仿佛有一只黑手在恶意操控着,让前端工程师们觉得不可以思议,也无可奈何。

我们在做前端开发时, 对于下拉选一般都会有一个“全部”选项,value='',用于清空前面选择的值,这是在正常不过了,但这在vue就开始变得奇奇怪怪,逻辑狗屁不通。

下面我开始对这个诡异的bug进行解刨,分析:

我的第一个页面的代码如下:

bug出现过程:

1.点击业务类型下拉选,选择选项一,F12能观察到成功赋值"one"传到后台完成了过滤查询;

2.我现在不想通过“one”来过滤了,我想查询所有的,于是我再次点开下拉选选择全部,奇怪的时候发生了,竟然无法选择“全部”这个选项。如下图所示:

通过上面的两部操作,就可以看到无法选择这个值。并且点击查询后,会发现前端依然将上一次选择的值“one”给传到后台了,而并非空串''。

3.第三步 :第三次点开下拉选,再次选择“全部”,你会发现这时候终于选上了。但是,然并卵,并没有什么卵用。

通过上图你可以看出,就算你选上了“全部”,也是没什么卵用的,依然给你传上次选择的“one”。

以上便是vue的下拉选无法选择“全部”,也无法赋值为空串的bug。而且这个bug并不完全表现在操作下拉选的时候,在进行刷新,清空的时候依然存在这个bug。同样的,重新加载页面后,我们再来进行下面的操作步骤:

1.选择“选项二”,点击搜索,在F12里可以看到businessType成功赋值为“two”,没有任何问题。为了方便对比,同时我还选择了其它的值,如下图:

2.这时候我想刷新页面,清空所有选择的值,重新查询一次,这时候奇怪的事情发生了,下拉选的值无法清除,其它的值都可以清楚,偏偏,唯独就下拉选的不可以。准确点来说,是this.body对象中的属性businessType无法赋值为空'',因为刷新是调用了clear()方法。同在一个对象body里,为什么,为什么除了businessType无法赋值为空串外,其它的属性都可以?“本自同对象,何故你与众不同?”

于是我决定打个断点,一探究竟。结果竟然神奇的发现,点击刷新后,调用clear()方法,this.body.businessType的值确实被赋值为了空串''。但是为什么还是往后台传“two”呢?

3.第三步,再次刷新。会惊奇的发现,所有的值被清空了。这就留下了一个引人深思的问题:“businessType”的值为什么要刷两次才可以清空,其它的值只需要一次?

我开始思考,研究这个问题。通过我的观察,虽然表面上看,我们操作的是一个对象body里的属性,一部分属性无法赋值为空串'',一部分可以。但转换思维,从另一个角度来看,这些对象中无法被赋值为空串''的属性,都有绑定了v-model,并且都在i-select下拉选中绑定的。于是我推测这跟 v-model和i-select混合使用有关系。为了证实这个观点,我又找了其它页面测试,结果发现所有对象中的属性如果在i-select下拉选中双向绑定了v-model,第一次都无法赋值为空串'',都会继续传上一次的值到后台。必须要进行两次赋值为空串,才能真正的赋值为空串。

根据这些研究,推敲出一个逻辑: v-model和i-select混合使用时,每次赋值的时候,其值都被记录,当下次赋值的时候,如果判断为空串'',将取上一次赋值的值,重新赋值给这个属性。

为此我还特意整理了一根演示代码逻辑:

从上面的代码可以看出,每一次调用updateObject()方法进行更新数据的时候,都会先判断传入的值是否为空串'',如果是就取上次的值赋值,如果不是就取传入的值。与此同时,每次都记录调用方法时传入的值。

根据上面的代码逻辑,就能合理的解释当你在 i-select的下拉选选择了一个值“one”后,为什么第一次刷新的时候明明debug看到值已经是空串''了,可还是把“one”传到看后台,第二次刷新的时候才真正的传入了空串''。

虽然以上代码逻辑能解释这种现象,但vue的底层是不是这样的不得而知。由于本人水平有限,无法深入解读其源码,只好将这个bug反馈给vue官方。期待官方能告诉我一个答案。虽然我未能研究出底层原理,但也想出了两种解决方案:

1.使用null替代空串'',用null以后你会发现刷新的时候只需要一次就可以把值清空了,而且下拉选选择“全部”选项的时候,一次就可以选中,而且也能成功赋值传入后台。

2.使用空格' '替换空串'',然后后台进行去空格操作。或者是采取其它标识符,例如“ALL”之类,后台再进行判断后重新赋值。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-09-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Java深度编程 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Plotly+Seaborn+Folium:爱彼迎租房数据可视化探索
Airbnb是AirBed and Breakfast ( “Air-b-n-b” )的缩写,中文名称之为:空中食宿,是一家联系旅游人士和家有空房出租的服务型网站,可以为用户提供各式各样的住宿信息。
皮大大
2022/01/12
1K0
Plotly+Seaborn+Folium:爱彼迎租房数据可视化探索
端到端案例研究:自行车共享需求预测详细教程(附python代码演练)
共享单车需求分析是指研究影响共享单车服务使用的因素以及不同时间、地点对自行车的需求。此分析的目的是了解自行车使用的模式和趋势,并对未来需求做出预测。这篇文章将研究统计机器学习方法如何分析给定的数据。
磐创AI
2023/08/29
2.6K0
端到端案例研究:自行车共享需求预测详细教程(附python代码演练)
基于随机森林模型的心脏病人预测分类
今天给大家分享一个新的kaggle案例:基于随机森林模型(RandomForest)的心脏病人预测分类。本文涉及到的知识点主要包含:
皮大大
2022/02/22
2.1K0
基于随机森林模型的心脏病人预测分类
股神降临,一份通俗易懂的实践指南,用LSTM预测股票价格
股票市场如同一个巨大的信息海洋,无数投资者在其中寻找规律。传统分析方法依赖技术指标与基本面数据,但随着人工智能的发展,一种名为
不惑
2025/04/10
2.2K2
股神降临,一份通俗易懂的实践指南,用LSTM预测股票价格
时间序列预测(二)基于LSTM的销售额预测
O:小H,Prophet只根据时间趋势去预测,会不会不太准啊 小H:你这了解的还挺全面,确实,销售额虽然很大程度依赖于时间趋势,但也会和其他因素有关。如果忽略这些因素可能造成预测结果不够准确 小O:那有没有什么办法把这些因素也加进去呢? 小H:那尝试下LSTM吧~
HsuHeinrich
2023/05/25
1.5K0
时间序列预测(二)基于LSTM的销售额预测
基于长短期记忆模型的股价预测及可视化
1、https://easyai.tech/ai-definition/lstm/
皮大大
2024/09/09
3750
Plotly+Pandas+Sklearn:打响kaggle第一枪
很多读者问过我:有没有一些比较好的数据分析、数据挖掘的案例?答案是当然有,都在Kaggle上啦。
皮大大
2021/11/26
4910
Plotly+Pandas+Sklearn:打响kaggle第一枪
Kaggle系列- Russia房产价格预测top1%(22/3270)方案总结
比赛名称:Sberbank Russian Housing Market 比赛链接:https://www.kaggle.com/c/sberbank-russian-housing-market
致Great
2021/01/18
1K0
使用Python实现深度学习模型:智能空气质量监测与预测
智能空气质量监测与预测是环境保护中的重要应用,通过深度学习技术,可以实时监测和预测空气质量,帮助政府和公众采取有效措施,减少空气污染。本文将介绍如何使用Python和深度学习技术来实现智能空气质量监测与预测。
Echo_Wish
2024/08/21
5190
使用Python实现深度学习模型:智能空气质量监测与预测
爱数课实验 | 首尔共享自行车需求数据可视化分析
简介:近些年,“共享单车”模式迅速地在全球各大城市中流行起来,但随着资本的逐步退潮,共享单车企业需寻求新的盈利模式,首要任务便是探究共享单车使用量的影响因素。本案例使用Matplotlib包和Seaborn的可视化库,对首尔地区一共享单车公司在2017年到2018年的使用量数据集进行可视化分析,并利用线性回归等模型预测单车使用量,得出共享单车使用量影响因素分析结论。
数据科学人工智能
2022/04/01
1.6K0
爱数课实验 | 首尔共享自行车需求数据可视化分析
kaggle-top50 of music
数据本身是比较完美的,没有涉及到太多的数据预处理工作,主要是学习到了多种图形的绘制
皮大大
2020/10/30
6670
kaggle-top50 of music
股票预测 lstm(时间序列的预测步骤)
如果对LSTM原理不懂得小伙伴可以看博主下一篇博客,因为博主水平有限,结合其他文章尽量把原理写的清楚些。
全栈程序员站长
2022/08/01
2.5K1
股票预测 lstm(时间序列的预测步骤)
深入探讨Python中的时间序列分析与预测技术
时间序列分析是数据科学中的重要领域,它涵盖了从数据收集到模型构建和预测的整个过程。Python作为一种强大的编程语言,在时间序列分析和预测方面有着丰富的工具和库。本文将介绍Python中常用的时间序列分析与预测技术,并通过代码实例演示其应用。
一键难忘
2024/08/15
4210
评分卡模型(一)评分卡建模实战
由于评分卡是基于LR模型训练的,虽然在特征处理过程较为严格,但本身模型准确性较低。因此可以考虑通过其他准确率高的模型进行训练,例如XGBoost。只需将odd的计算换为(1-p)/p即可,这里的p为模型输出的概率值。
HsuHeinrich
2023/05/25
3.5K0
评分卡模型(一)评分卡建模实战
使用LSTM模型预测多特征变量的时间序列
使用LSTM模型预测多特征变量的时间序列,能够帮助我们在各种实际应用中进行更准确的预测。这些应用包括金融市场预测、气象预报、能源消耗预测等。
Python编程爱好者
2024/07/12
1.7K0
使用LSTM模型预测多特征变量的时间序列
评分卡模型(二)基于评分卡模型的用户付费预测
只需要定义好什么是好人,什么是坏人,就可以按照标准流程构建评分卡了,是不是很方便~
HsuHeinrich
2023/05/25
1.4K0
评分卡模型(二)基于评分卡模型的用户付费预测
独家 | 教你使用简单神经网络和LSTM进行时间序列预测(附代码)
下载波动性标准普尔500数据集,时间范围是:2011年2月11日至2019年2月11日。我的目标是采用ANN和LSTM来预测波动性标准普尔500时间序列。
数据派THU
2019/05/21
3.7K0
金融数据分析库yfinance,初次使用体验!
今天给大家介绍一个金融数据分析库yfinance,主要是基于该库下的股票数据分析及股价预测(使用LSTM模型)
皮大大
2023/08/29
16.5K2
使用Python实现深度学习模型:智能交通信号优化
智能交通信号优化是现代城市交通管理中的重要任务。通过深度学习技术,可以分析和预测交通流量,优化交通信号控制,提高交通效率,减少拥堵。本文将介绍如何使用Python和深度学习技术来实现智能交通信号优化。
Echo_Wish
2024/08/22
3090
使用Python实现深度学习模型:智能交通信号优化
是涨是跌?我用Python预测股票价格趋势
要预测股票趋势,通常需要历史的各类交易价格数据来进行模型的搭建。“历史惊人的相似”是股票趋势判断问题的重要假设。通常我们的思维是,股票某一天的交易价格受到该交易日前面的许多交易日的影响,而股价的确定则是由买卖市场双方共同决定的。当我们收盘股票数据集时,应该将多个开盘日归入参考范畴。本文将前 N 个交易日作为一个时间窗口,并设为训练集,将第 N+1 个交易日作为测试集,预测测第 N+2 个交易日的股票趋势情况。通过滑动窗口的方法,设每次滑动窗口移动的距离为 1(即 1 天),则在初始 T 个交易日上能够构造多个训练集和测试集,且训练样本的数据始终等于 N。
数据STUDIO
2021/06/24
6.7K0
推荐阅读
相关推荐
Plotly+Seaborn+Folium:爱彼迎租房数据可视化探索
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档