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 相关文章推荐
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 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摘要生成函数(无乱码)
2012/02/04 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
pycharm安装图文教程
2017/05/02 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
基于python实现百度翻译功能
2019/05/09 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python3实现绘制二维点图
2019/12/04 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
品质主管岗位职责
2014/03/16 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
写给老婆的保证书
2015/02/27 职场文书
旷工辞退通知书
2015/04/17 职场文书
千与千寻观后感
2015/06/04 职场文书
高中运动会广播稿
2015/08/19 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
改造DE1103三步曲
2022/04/07 无线电
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js