Vue组件更新数据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项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧2018-11-11
混入可以省很多代码(高类聚低耦合),还方便维护,下面这篇文章主要给大家介绍了关于vuejs中使用mixin局部混入/全局混入的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
大家都知道vue-router有两种模式，hash模式和history模式，带＃的则是hash模式。接下来给大家带来了Vue 去除路径中的＃号的解决方法，感兴趣的朋友一起看看吧2018-04-04
本篇文章主要介绍了如何去除vue项目中的#及其ie9兼容性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue element-ui动态横向统计表格的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了VUE 的编译作用域及slot作用域插槽问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了Vue+ssh框架实现在线聊天，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
在Vue中嵌入第三方页面可以采用多种方法,例如使用<iframe>、Vue插件、动态加载第三方脚本或WebComponents,不同方法适用于不同类型的内容和项目需求,如<iframe>适用于整个网页,而动态脚本和WebComponents适合特定功能,选择合适的方法可以有效整合外部资源2024-09-09
这篇文章主要介绍了vue 页面回退mounted函数不执行的解决方案 ，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论