Vue组件更新数据v-model不生效
问题描述在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model中的属性进行双向绑定,此时在程序中去更新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的特性,对跟节点下的数据变更的自动检测。
更多推荐
已为社区贡献3条内容
所有评论(0)