CODEWITHSUNDEEP
javascriptnode.jsvue.jsvuejs2
Sérgio Reis
Sérgio Reis

Reputation: 2523

Vue Watch not triggering

Trying to use vue watch methods but it doesn't seem to trigger for some objects even with deep:true.

In my component, I recieve an array as a prop that are the fields to create the following forms. I can build the forms and dynamicly bind them to an object called crudModelCreate and everything works fine (i see in vue dev tools and even submiting the form works according to plan)

But I have a problem trying to watch the changes in that dynamic object.

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

Upvotes: 41

Views: 91018

Answers (4)

Damian Chudobiński
Damian Chudobiński

Reputation: 559

In Vue 3 we can just use deep watch like:

watch(() => props.list, (newList, oldList) =>
{
   console.log('list updated');
}, { deep: true });

Upvotes: 2

ricardoorellana
ricardoorellana

Reputation: 2340

From the docs

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

Please take a look to Reactivity in Depth https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Upvotes: 54

SirPeace
SirPeace

Reputation: 109

In case you missed it, @AndreiNemes in comments section proposed to use Vue.set() which helped me to trigger watch on adding new properties into existing object in state.

More about Vue.set(): Vue 2 documentation

Upvotes: 0

Andy Peaple
Andy Peaple

Reputation: 59

In certain circumstances it is possible to force a refresh by adding a key property to the child component containing a json string of the object being passed to it in v-model.

<Component v-model="deepObject" :key="JSON.stringify(deepObject)" />

Upvotes: 3

Related Questions