解决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 版本自动生成文章摘要
Jul 23 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery简单实现日历的方法
May 04 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 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程序员工具
2008/05/26 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
如何提高数据访问速度
2016/12/26 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
mac系统安装Python3初体验
2018/01/02 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
params有什么用
2016/03/01 面试题
岗位职责风险防控
2014/02/18 职场文书