解决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 最简单的属性菜单
Oct 08 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python批量提取word内信息
2015/08/09 Python
python实现按任意键继续执行程序
2016/12/30 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
.net工程师笔试题
2012/06/09 面试题
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学习党史心得体会2016
2016/01/23 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis