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改变新的数据源，然后再特定的情况下，比如提交等时机，将新的数据源赋给老的数据源，这样就不会引起问题。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 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.js 解决v-model让select默认选中不生效的问题

    笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这个问题,顺便分享一下. 问题 先上代码: 上图是前端的H5页面 下面是js代码: 一眼看上好像也没有什么问题.js 在初始化的时候,调用后台接口,取到数据然后传递给vue里面定义的data里面.并且前端页面除了select不能正常选中,其他的input 框的数据也都全部显示出来了(因为涉及一些机密的

  • Vue组件更新数据v-model不生效的解决

    目录 组件更新数据v-model不生效 问题描述 原因分析 方法一 方法二 方法三 关于v-model失效的问题 解决办法 组件更新数据v-model不生效 问题描述 在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染. 原因分析 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来回避这些限制并保证它们的响

  • 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组件间的通信方式详析

    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

随机推荐