解决vue select当前value没有更新到vue对象属性的问题

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对象属性的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • 关于vue中watch检测到不到对象属性的变化的解决方法

    关于vue中watch检测到不到对象属性的变化的解决方法

    前言 在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 <template> <div> <dl>name: {{option.name}}</dl> <dl>age: {{option.age}}</dl> <dl> <button @click="updateAgeTo25">upda

  • 解决vue attr取不到属性值的问题

    js: $(document).ready(function() { $.get("/account/authGroupInfo",{id:groupId}, function(data) { var arr = data.data.rules.split(","); console.log(arr); $.get("/account/allRule",{}, function(result) { ruleList.options = resul

  • 解决vue select当前value没有更新到vue对象属性的问题

    vue是一款轻量级的mvvm框架,追随了面向对象思想,使得实际操作变得方便,但是如果使用不当,将会面临着到处踩坑的危险,写这篇文章的目的是我遇到的这个问题在网上查了半天也没有发现解决方案,最终研究了vue的源码中有关select元素的部分找到了答案,下面简单介绍我踩的关于select的一个坑: 使用场景:有两个select元素,一个select元素变动时,动态修改另一个select中填充的内容,并默认选择第一项,问题来了,每次当我提交form数据时发现:从slave元素对应的数据没有更新到响应v

  • 解决vue中数据更新视图不更新问题this.$set()方法

    目录 vue数据更新视图不更新 解决问题 vue数据不更新的原因(数据更改了,但是视图没有更新) 解决办法 具体流程如下 数组更新检测 注意事项 对象更改检测注意事项 vue数据更新视图不更新 1.data中有对象obj :{name:'远航',age:18} 2.此时新增phone this.obj.phone = '123456' 再次更新 用this.obj.phone = '654321' 视图未更新  用this.$set(this.obj,"phone", "65

  • Vue数据更新但页面没有更新的多种情况问题及解决

    目录 数据更新但页面没有更新的多种情况 1.Vue无法检测实例被创建时不存在于data中的变量 2.vue也不能检测到data中对象的动态添加和删除 3.数组的时候 4.异步获取接口数据,DOM数据不发现变化 5.循环嵌套层级太深,视图不更新 6.路由参数变化时,页面不更新(数据不更新) 强制更新数据 this.$forceUpdate() 数据更新但页面没有更新的多种情况 1.Vue无法检测实例被创建时不存在于data中的变量 原因:由于 Vue 会在初始化实例时对 data中的数据执行 ge

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

  • Vue select 绑定动态变量的实例讲解

    概述 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定.所以通过数据的id或者下标进行变量拼接.页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code <div v-for="(item, index) in tagAllDate" :key="index"> <el-form-item :label="item.name"> <el-sel

  • Ant Design of Vue select框获取key和name的问题

    目录 Ant Design of Vue select框获取key和name 我的记录 Ant Design Vue使用select出现的问题 1.select下拉菜单滚动条滚动后,自动弹回到顶部 2.下拉列表在局部滚动时不跟随,与select框分离 Ant Design of Vue select框获取key和name 加入label-in-value这个属性 <a-form-item label="分类">   <a-select     placeholder=

  • vue select组件绑定的值为数字类型遇到的问题

    目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q

  • Vue v2.5 调整和更新不完全问题

    Vue v2.5 调整和更新不完全问题

    Vue 2.5 Level E 发布了: 新功能特性一览 近日,Vue v2.5 发布,除了对 TypeScript 的更好的支持外,还有一些功能和语法的调整,你需要了解.本文,不谈 TypeScript,只对一些主要的调整进行说明. 本来,对 Vue 的版本升级不怎么敏感,所以没有太关注最近的 v2.5 的发布.今天,在重新下载 Vue 构建项目的时候,发现有好几个警告提示. 看警告提示,知道是因为使用了 v2.5 的 Vue,scoped slot 的语法进行了调整,然后去 GitHub 上

  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

随机推荐