Vue中watch检测不到数据变化的情况解决

问题现象

有一个判断语句,如果没有图像属性,则 data[‘图像’] = [ ]   data['图像'].push('照相机拍照的结果路径'),如图一所示


图一,错误代码

发生的事情是:在watch中无法检测到变化  并且把数据打印在页面上的时候,发现数据完全没有变化,但是如果更改其他绑定的v-model数据,图片那块也会刷新出变化 

但是不操作别的就不行!

添加图片属性之后,页面上的数据毫无变化

解决

为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。请参照https://v1-cn.vuejs.org/guide/reactivity.html

解决方式: 

通过vue的this.$set(object, key, value)方法

通过Object.assign()重新创建一个对象, 例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

代码示例:

代码示例

有一个遗留问题:如果父级向子级传递一个对象,子级可以更改这个值吗 于此同时父级的值会发生相应变化吗??  理论上自己不可以更改父级的值  此处需要一个test,未完待续·····

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容