Vue Watch nicht triggern

Question

Versucht, vue watch-Methoden zu verwenden, aber es scheint nicht für einige Objekte auch mit deep:true auslösen.

In meiner Komponente erhalte ich ein Array als Prop, das die Felder die folgenden Formen erstellen. kann ich die Formen bauen und dynamicly binden sie an ein Objekt namens crudModelCreate und alles funktioniert (i in vue Entwickler-Tools sehen und sogar die Form submiting arbeitet nach Plan)

Aber ich habe ein Problem, zu versuchen, die Änderungen zu sehen in diesem dynamischen Objekt.

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

Answer 1

Aus der Dokumentation

Aufgrund der Einschränkungen des modernen JavaScript (und die Aufgabe von Object.observe) kann Vue Eigenschaft Hinzufügen oder Löschen nicht erkennen. Da Vue den Getter/Setter-Konvertierungsprozess während der Instanzinitialisierung ausführt, muss eine Eigenschaft im Datenobjekt vorhanden sein, damit Vue es konvertieren und reaktiv machen kann.

Bitte werfen Sie einen Blick auf Reaktivität in Tiefen https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats