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 对表格的行和列都能加亮显示
Dec 26 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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
PHP安全配置
2006/12/06 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Windows下安装Scrapy
2018/10/17 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
印尼购物网站:iLOTTE
2019/10/16 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
幼儿园的门卫岗位职责
2014/04/10 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
小英雄雨来观后感
2015/06/09 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸