Vue中watch检测不到数据变化的情况解决
2018-07-18 本文已影响0人
Echo_前端
问题现象
有一个判断语句,如果没有图像属性,则 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,未完待续·····