Vue下拉框回显并默认选中随机问题


Posted in Javascript onSeptember 06, 2018

今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了,

但是这个问题还是存在的,后来发现问题是

回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些,

Vue下拉框回显并默认选中随机问题

Vue下拉框回显并默认选中随机问题

Vue下拉框回显并默认选中随机问题

Vue下拉框回显并默认选中随机问题

因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果

Vue下拉框回显并默认选中随机问题

总结:

1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,,

PS:vue 运用ElementUI,做select下拉框回显

第一、加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显。

第二、要保证select下拉的ID和v-model里边的id保持一致。

第三、elementUI就会自动的将数据回显了。

一下是截图:

Vue下拉框回显并默认选中随机问题 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
jquery实现弹出层效果实例
May 19 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
vue兄弟组件传递数据的实例
Sep 06 #Javascript
webpack4简单入门实例
Sep 06 #Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
对vue中v-on绑定自定事件的实例讲解
Sep 06 #Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 #Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 #Javascript
Vue-component全局注册实例
Sep 06 #Javascript
You might like
Zend Framework分页类用法详解
2016/03/22 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python if语句知识点用法总结
2018/06/10 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
出纳岗位职责范本
2013/12/01 职场文书
廉洁使者实施方案
2014/03/29 职场文书
邓小平理论心得体会
2014/09/09 职场文书
管理人员岗位职责
2015/02/14 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
简单介绍Python的第三方库yaml
2021/06/18 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers