web-dev-qa-db-fra.com

Vue La montre ne se déclenche pas

Essayer d'utiliser les méthodes vue watch mais cela ne semble pas se déclencher pour certains objets même avec deep:true.

Dans mon composant, je reçois un tableau comme accessoire qui sont les champs pour créer les formulaires suivants. Je peux construire les formulaires et les lier dynamiquement à un objet appelé crudModelCreate et tout fonctionne bien (je vois dans vue outils de développement et même soumettre le formulaire fonctionne selon le plan)

Mais j'ai un problème à essayer de regarder les changements dans cet objet dynamique.

  <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
        },
    }
javascriptnode.jsvue.jsvuejs2
12
Sérgio Reis

À partir des documents

En raison des limites du JavaScript moderne (et de l'abandon d'Object.observe), Vue ne peut pas détecter ajout ou suppression de propriété. Puisque Vue effectue le processus de conversion getter/setter lors de l'initialisation de l'instance, une propriété doit être présente dans l'objet de données pour que Vue le convertisse et le rende) réactif.

Veuillez consulter la Réactivité en profondeur https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

13
ricardoorellana