尝试使用vue watch方法,但即使使用,它似乎也不会触发某些对象deep:true。
deep:true
在我的组件中,我收到一个数组作为prop,它们是创建以下表单的字段。我可以构建表单并将其动态绑定到一个名为的对象,crudModelCreate并且一切正常(我在vue开发工具中看到,甚至可以按计划提交表单作品)
crudModelCreate
但是我在尝试观察该动态对象的变化时遇到了问题。
<md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input> ... data() { return { state: 1, // This gets changed somewhere in the middle and changes fine crudModelCreate: {}, } }, ... watch: { 'state': { handler: function(val, oldVal) { this.$emit("changedState", this.state); // this works fine }, }, 'crudModelCreate': { handler: function(val, oldVal) { console.log("beep1") this.$emit("updatedCreate", this.crudModelCreate); // This doesn't work }, deep: true, immediate: true }, }
来自文档
由于现代JavaScript的局限性(以及Object.observe的放弃),Vue无法检测到 属性的添加或删除 。由于Vue在实例初始化期间执行getter / setter转换过程,因此数据对象中必须存在一个属性,以便Vue对其进行转换并使其具有反应性。
请看一下深度的反应性https://vuejs.org/v2/guide/reactivity.html#Change-Detection- Caveats