解决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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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中for循环语句的几种变型
2007/03/16 PHP
PHP操作文件方法问答
2007/03/16 PHP
php中的观察者模式
2010/03/24 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python中的句柄操作的方法示例
2019/06/20 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
大学生校园创业计划书
2014/02/08 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
保安辞职信范文
2015/02/28 职场文书
导游词之西安骊山
2019/12/03 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
关于python中模块和重载的问题
2021/11/02 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS