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手錶不觸發

回答

相關問題