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函数的4种调用方法详解
Apr 22 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
js实现前端分页页码管理
Jan 06 Javascript
js实现图片放大展示效果
Aug 30 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 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代码
2006/12/06 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
vue组件创建的三种方式小结
2020/02/03 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
Python编程中的文件操作攻略
2015/10/16 Python
Python+django实现文件下载
2016/01/17 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
简单了解django文件下载方式
2020/02/10 Python
Python中Selenium库使用教程详解
2020/07/23 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
室内设计专业自荐信
2014/05/31 职场文书
管理工程专业求职信
2014/08/10 职场文书
私人委托书格式
2014/09/10 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL