vue.js 解决v-model让select默认选中不生效的问题


Posted in Javascript onJuly 28, 2020

笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下。

问题

先上代码:

vue.js 解决v-model让select默认选中不生效的问题

上图是前端的H5页面

下面是js代码:

vue.js 解决v-model让select默认选中不生效的问题

vue.js 解决v-model让select默认选中不生效的问题

一眼看上好像也没有什么问题。js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义的data里面。并且前端页面除了select不能正常选中,其他的input 框的数据也都全部显示出来了(因为涉及一些机密的数据,所以还是涂鸦一下,主要还是把问题说清楚)

vue.js 解决v-model让select默认选中不生效的问题

按照常理来说是不可能出现这个问题,毕竟之前在其他的项目也做过类似的。于是就开始查找问题了。

思考1:

是不是vue.js的版本问题导致的,后来换了版本发现还是不行这个假设不成立

思考2:

是不是我的变量名称写错了,检查一遍肯定不是这个问题

思考3:

是不是后台传过来的值就是空的,然后进行验证利用js的打印以及input框输出

vue.js 解决v-model让select默认选中不生效的问题

发现页面上也是能显示出来了,然后又排除了这个原因。

思考4:

是不是后台的匹配的hyList没有值呢?看了控制台确实有值的,于是又再一次实验一下再vue 的data里面写死了一个值

vue.js 解决v-model让select默认选中不生效的问题

然后前端去v-model="hy"也可以默认选中。这时候我就非常的纳闷了,咋回事了呢?后面随手改一下数据把hy:"8082"改成hy:8082发现,咦?选不中了,是不是值类型不匹配导致的前端不能默认选中。幸喜了一下,以为找到问题,后面经过校验发现也不是这个问题(此过程省略500字),又失望了一下。

突然,在举手无措的时候,狂刷页面,有一次我竟然看见默认选中,于是我又陷入了深深的思考,这不会是灵异事件吧!一看时间不早了,同事都已经下班走了,而我秉着有些问题老是去想,想不到,还不如路上想想或许就想通了,确实下班的路上一直在想这个问题(然而并没有想到什么,哈哈)

回到家,依然打开电脑,在那里狂刷页面,还是期待着能够出现一次默认选中的,终于皇天不负有心人,出来了。出来是出来了,还是没有任何进程。无奈,去问一下以前在一起的一位前端大神吧!霹雳吧啦在qq上的把问题描述了一遍,大神说代码贴出来看看,而后,大神的第一句话就是,你这么写代码的第一次见,果然骚操作。大神说你调接口是ajax异步的。我突然明白了,原来我分别调了两次接口,获取行业列表是一个接口,获取基本信息的行业是一个接口,ajax 的异步调用,虽然在js 的初始化的是时候去调用了,但是可能基本信息先数据出来了,行业列表的信息还没有出来,导致前端不能默认选中的原因。

解决方案一:

把两个异步请求放在vue的mounted生命周期中,注意,一定先调行业列表的数据,后调基本信息数据

解决方案二:

写一个接口里面就可以了

总结:

主要是对于一些技术点还是停留在会用的阶段,不过对于ajax这个问题没有注意到确实不应该啊,平时总是霹雳吧啦的打代码。这次踩的这个坑,算是一种成长了,平时也是多注意的一些细节的问题的。

以上这篇vue.js 解决v-model让select默认选中不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
浅谈jquery事件处理
Apr 24 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue2.0 $set()的正确使用详解
Jul 28 #Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 #Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 #Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 #Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 #Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 #Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 #Javascript
You might like
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
北京SQL新华信咨询
2016/09/30 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
会计系中文个人求职信
2013/12/24 职场文书
文案策划求职信
2014/03/18 职场文书
医学专业自荐信
2014/06/14 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
政工师工作总结2015
2015/05/26 职场文书
长江七号观后感
2015/06/11 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
MySQL学习之基础命令实操总结
2022/03/19 MySQL