解决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 相关文章推荐
JavaScript函数获取事件源的小例子
May 14 Javascript
javascript搜索框效果实现方法
May 14 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
微信小程序使用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经典算法集锦
2015/11/14 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
教师简历自我评价
2014/02/03 职场文书
小学教师办公室制度
2014/02/03 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
PHP基本语法
2021/03/31 PHP