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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
vue实现div单选多选功能
Jul 16 Javascript
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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
python中遍历文件的3个方法
2014/09/02 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
开业主持词
2014/03/21 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
干部培训工作总结2015
2015/05/25 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android