解决vue select当前value没有更新到vue对象属性的问题


Posted in Javascript onAugust 30, 2018

vue是一款轻量级的mvvm框架,追随了面向对象思想,使得实际操作变得方便,但是如果使用不当,将会面临着到处踩坑的危险,写这篇文章的目的是我遇到的这个问题在网上查了半天也没有发现解决方案,最终研究了vue的源码中有关select元素的部分找到了答案,下面简单介绍我踩的关于select的一个坑:

使用场景:有两个select元素,一个select元素变动时,动态修改另一个select中填充的内容,并默认选择第一项,问题来了,每次当我提交form数据时发现:从slave元素对应的数据没有更新到响应vue对象相关属性,奇怪的是当我使用jquery获取该select的val()方法获取的是最新的数据,那么问题就来了:为什么元素的值发生了变动却没有更新到vue对象相关属性?

vue中相关源码:

// attach listener
this.listener = function () {
var value = getValue(el, multiple);
value = self.params.number ? isArray(value) ? value.map(toNumber) : toNumber(value) : value;
self.set(value);
};
this.on('change', this.listener);

看到了吧,只有select的change事件才会触发select元素的value值更新到vue对象相关属性,但我在使用select时从select的内容是我使用js代码追加的,选择第一项也是代码追加,这样就没有触发vue中select的listener 函数,当然这种情况仅仅出现在保存数据时没有改变从select内容而采用默认第一项,所以如果用户选择select的其他项后再切回第一项就可以触发该事件完成vue对象属性变更。

上面的解决方案不够友好,使用者会反感这种操作,那么如何解决呢?

我这里给出我的解决方案:在使用js代码追加内容到从select后,使用更改从select对应的vue对象属性来实现默认选择第一项。

以上这篇解决vue select当前value没有更新到vue对象属性的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
offsetParent 算法分析
Apr 05 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
微信小程序使用wxParse解析html的实现示例
Aug 30 #Javascript
vue中rem的配置的方法示例
Aug 30 #Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 #Javascript
vue-swiper的使用教程
Aug 30 #Javascript
分享vue里swiper的一些坑
Aug 30 #Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 #Javascript
小程序图片长按识别功能的实现方法
Aug 30 #Javascript
You might like
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
php网页后退不再出现过期
2007/03/08 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP pear安装配置教程
2016/05/14 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
深入解析Python中的集合类型操作符
2015/08/19 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python实现用户名密码校验
2020/03/18 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
django在开发中取消外键约束的实现
2020/05/20 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
python Cartopy的基础使用详解
2020/11/01 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
银行求职信个人范文
2013/12/16 职场文书
抽奖活动主持词
2014/03/31 职场文书
数字化校园建设方案
2014/05/03 职场文书
商业街策划方案
2014/05/31 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android