解决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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
python中的多线程实例教程
2014/08/27 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
农行实习自我鉴定
2013/09/22 职场文书
质检部经理岗位职责
2014/02/19 职场文书
团日活动总结怎么写
2014/06/25 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
员工年终考核评语
2014/12/31 职场文书
画展观后感
2015/06/17 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang