Vue手表不触发

尝试使用vue手表方法，但即使使用deep:true，它似乎也不会触发某些对象。Vue手表不触发

在我的组件中，我收到一个数组作为道具，这些字段是用于创建以下形式的字段。我可以构建形式和动态地将它们绑定到名为crudModelCreate对象，一切工作正常（我在VUE开发工具看，甚至submiting形式按计划工作）

但我想关注这些变化的一个问题在那个动态的对象中。

<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 
     }, 
    }

来源

2017-10-10 Sérgio Reis

如何在你的对象的变化进行？ –

您可能必须使用['Vue.set']（https://vuejs.org/v2/api/#Vue-set）来更新对象属性，尤其是在添加新属性时。 –

[Vue.js观看深层属性]的可能重复（https://stackoverflow.com/questions/44760474/vue-js-watching-deep-properties） –

从文档

由于现代的JavaScript（和Object.observe的遗弃）的局限性，Vue公司无法检测属性添加或删除。由于Vue在实例初始化期间执行getter/setter转换过程，因此数据对象中必须存在一个属性，以便Vue将其转换并使其处于被动状态。

请看一看，以反应在深度https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

来源

2017-10-10 12:56:06 ricardoorellana

即使通过执行诸如 'this。之类的操作来添加手表，该值在初始化之后仍然不起作用，因此$ watch（'$ data.crudModelCreate'，this.updated，{deep：true}）' 。在做了Andrei Nemes所说的工作之后，我认为在我的用例中并没有太多限制。 –

实际上，当你在'crudModelCreate：{}'这样的数据上定义一个对象时，文档就会说这正是你遇到的问题，然后你像在'crudModelCreate'手表中那样添加一个属性，那些新的道具将不会除非你把它指定为'Vue.set（object，key，value）'，就像@Andrei Nemes正确地提到它，并且我从文档中指出你 – ricardoorellana

Vue手表不触发

回答

相关问题