Vue组件更新数据v-model不生效的解决
目录
- 组件更新数据v-model不生效
- 问题描述
- 原因分析
- 方法一
- 方法二
- 方法三
- 关于v-model失效的问题
- 解决办法
组件更新数据v-model不生效
问题描述
在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染。
原因分析
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
详见:检测变化注意事项
## 解决方案 对于这种对象变化,我们有三种方法去解决:
方法一
使用Vue.set(object,key,value)
Vue.set(vm.obj,"sex","man")
方法二
使用this.$set(this.object,key,value)
this.$set(this.obj,"sex","man")
方法三
使用**Object.assign({},this.obj)**重新赋值
this.obj.sex = "man"; this.obj = Object.assign({},this.obj)
总结:前两种方式都是应用了Vue内置的set方法去触发对象数据的检测,第三种方式使用的Vue的特性,对跟节点下的数据变更的自动检测。
关于v-model失效的问题
在父子组件中,例如iview的table组件中的slot,该函数相对比于table所在附件为父子组件,父子组件的v-model不会是双向绑定,只是单向传值,这是vue的机制问题,原因是不想让子组件污染父组件的数据环境,所以使用的单向传输,经过测试,使用on-change,on-blur等,均存在不同的问题,input如果使用on-change,修改数据源会导致输一个字符,然后更新到v-model绑定的数据源上,然后由于数据源的更新,就会导致该组件的再次渲染,input将会失去焦点,使用v-blur则会导致点击其他按钮时,第一次点击,失去input的焦点,执行绑定的方法,第二次点击才会生效。
解决办法
特别的土,声明一个新的数据源,然后使用on-change改变新的数据源,然后再特定的情况下,比如提交等时机,将新的数据源赋给老的数据源,这样就不会引起问题。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue.js 解决v-model让select默认选中不生效的问题
笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下. 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题.js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义的data里面.并且前端页面除了select不能正常选中,其他的input 框的数据也都全部显示出来了(因为涉及一些机密的
-
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数
-
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
一.在我们使用vue进行开发的过程中,可能会遇到一种情况: 当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新.它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法 二.Vue.set() 响应式新增与修改数据 此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set 调用方法:
-
vue在自定义组件中使用v-model进行数据绑定的方法
本文介绍了vue v-model进行数据绑定,分享给大家,具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <p class="parent"> <p>我是父亲, 对儿
-
Vue组件更新数据v-model不生效的解决
目录 组件更新数据v-model不生效 问题描述 原因分析 方法一 方法二 方法三 关于v-model失效的问题 解决办法 组件更新数据v-model不生效 问题描述 在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染. 原因分析 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来回避这些限制并保证它们的响
-
vue组件之间数据传递的方法实例分析
本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男' 把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&
-
Vue组件间数据传递的方式(3种)
vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div class='container'> <demo2 :msg="msg" @change="change" /> </div> </template> <script> import demo2 from './demo2' export
-
vue请求服务器数据后绑定不上的解决方法
后台返回的数据,json类型 {"success":1,"tagList":[{"Id":1,"name":"林俊杰"},{"Id":2,"name":"MV"},{"Id":3,"name":"三次元"},{"Id":4,"name":"
-
Vue使用Proxy代理后仍无法生效的解决
vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑: 配置完代理后请一定重新执行(重要,非常重要!) npm run dev 若重新执行命令后,代理仍为生效,请按下方步骤进行检查: 检查index.js文件中的代理是否配置正确,示例如下: proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原
-
vue更新数据却不渲染页面的解决
目录 vue更新数据却不渲染页面 1.Vue不能检测通过数组索引直接修改一个数组项 2.选择功能选中时赋值了,但没渲染页面 3.路由参数变化时 4.在异步更新执行之前操作DOM数据不会变化 5.获取后台返回的数组进行排序处理了,页面内容却不排序 vue页面的渲染过程 vue加载时文件的执行顺序 vue内部页面的执行顺序 vue中各选项及钩子函数执行顺序 vue更新数据却不渲染页面 1.Vue不能检测通过数组索引直接修改一个数组项 原因:由于JavaScript的限制,Vue不能检测数组和对象的变
-
Vue组件间的通信方式详析
目录 前言 组件之间通信的场景 父子组件之间的通信 父组件通过 prop 向子组件传递数据 子组件通过自定义事件向父组件传递数据 兄弟组件之间的通信 状态提升 隔代组件之间的通信 attrs/attrs/listeners provide/inject 基于 $parent/$children 实现的 dispatch 和 broadcast 前言 在Vue组件库开发过程中,Vue组件之间的通信一直是一个重要的话题,虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题,但是在组
-
Vue组件间的样式冲突污染问题详解
默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 导致组件之间样式冲突的根本原因是: 单页面应用程序中,所有组件的dom结构,都是基于唯一的index.html页面进行呈现的. 每个组件中的样式,都会影响整个index.html页面中的dom元素. 给left.vue文件中的p标签添加一个字体样式 <template> <div> <p >left组件</p> <MyCount :num="4&quo
-
element-ui自定义message-box自定义样式不生效的解决
目录 element-ui自定义message-box自定义样式不生效 背景 先分析下不生效的原因 解决方法 element-ui修改样式不生效,最简单的解决 element-ui自定义message-box自定义样式不生效 背景 这是小伙伴今天在开发中遇到的问题,使用jsx语法自定义一个msgbox,自定义msgbox自然需要自定义样式,然后就遇到了自定义customClass不生效的问题. 下面上jsx的一个写法 this.$msgbox({ title: '确认',
-
Vue 父子组件的数据传递、修改和更新方法
父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c
随机推荐
- 微信小程序实现图片预加载组件
- Microsoft VBScript 运行时错误 错误 '800a0046' 没有权限
- Android 实现圆角图片的简单实例
- iOS设置UIButton文字显示位置和字体大小、颜色的方法
- .net连接Mysql封装类代码 可直接调用
- Android中HorizontalScrollView使用方法详解
- javascript Firefox与IE 替换节点的方法
- Spring中DAO被循环调用的时候数据不实时更新的解决方法
- 解析java中的error该不该捕获
- 分享Android 蓝牙4.0(ble)开发的解决方案
- JS+CSS实现仿新浪微博搜索框的方法
- 台湾中原大学php教程孙仲岳主讲
- 配置ipsec
- 数字奥运引发建站热 主机市场供求两旺
- Java实现基于JDBC操作mysql数据库的方法
- spring cloud-给Eureka Server加上安全的用户认证详解
- Android编程实现popupwindow定时消失的方法
- JavaScript 正则表达式与字符串查找方法
- 详解IDEA多module项目maven依赖的一些说明
- ThinkPHP中获取指定日期后工作日的具体日期方法