解决vue select当前value没有更新到vue对象属性的问题
2018-08-30 14:55
1091 查看
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对象属性的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- [置顶] vue select当前value没有更新到vue对象属性
- 解决vue中对象属性改变视图不更新的问题
- 解决vue数组中对象属性变化页面不渲染问题
- 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
- vue中对象属性改变视图不更新问题
- Vue2.0 解决watch对象属性变化监听不到问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而元素中没有支持当前操作的元素”问题的解决方法
- “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而<ModificationFunctionMapping>元素中没有支持当前操作的<InsertFunction>元素”问题的解决方法
- “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而元素中没有支持当前操作的元素”问题的解决方法
- EF框架:“无法更新EntitySet“*****”,因为它有一个DefiningQuery,而元素中没有支持当前操作的元素”问题的解决方法
- “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而元素中没有支持当前操作的元素”问题的解决方法
- JS判断用户是否有权限进入当前页面,没有直接关闭(解决IE7以上版本提示问题)
- XPSP2中如何解决ASP--ADODB.Recordset (0x800A0CB3)当前记录集不支持更新问题
- "SQL1218N 在缓冲池 4096 中当前没有任何页面可用"问题的解决(由于隐藏的buffer引发的血案)
- GDAL更新至1.8.1后,通过属性查询矢量出错问题的解决方式
- GDAL更新至1.8.1后,通过属性查询矢量出错问题的解决方式
- "没有可用于当前位置的源代码"这个问题如何解决?
- 关于form表单的submit提交时对象没有该属性和方法问题
- 农行动态口令卡问题解决方案(Key:Vista,IE7,证书已锁定,438对象不支持此属性或方法)