Vue.js watch not triggering when object is modified

Question

In Vue.js I have three templates that should work together to trigger loading of new results. My container template is a general template that contain the filters and the results templates. I am having some difficulties with making watch() trigger changes in my results template when an object is changed in the filters template. The flow is quite simple. Here is what I have at the moment and how the flow works:

Filters template: on click my object property is updated with a new value and emit this change to the container template.

<span v-on:click='setClient(client.ccid)'>{{client.name}}</span>

data: function() {
    return {
        formData: {
            perPage: 15,
            clientId: null
        }
    }
}

setClient: function(clientId){
  this.formData.clientId = clientId;
  this.$emit('filters-update', this.formData);
}

Container template: - this has just the role to hold the filters and results template and pass the modified object to the results template.

<template>
   <div class="row">
     <filters v-on:filters-update="filtersUpdate"></filters>
     <results :filters='filters'></results>
   </div>
</template>

<script>
export default {
    data: function() {
       return  {
          filters: {}
       }
    },

    methods: {
        filtersUpdate: function(params){
            this.filters = params;
        }
    }
}
</script>

Results template:

export default {
  props: {
    filters: {
        type: Object
    },
  }
}

watch: {
  filters: function(){
    console.log("loading new results..");
    this.loadData();
  }
}

Have you tried deep watching for object change? https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data — Andrey Popov, Dec 17 '19 at 17:07
1, Does console logging confirm that `filtersUpdate` is being called? 2. Is the `watch` never called, or is it only called once? It seems you'd be emitting the same object every time, so I'd only expect it to trigger the `watch` the first time. 3. The code you posted for the `results` component has the `watch` section outside the component options. I assume that is inside the options object in your real code? — skirtle, Dec 17 '19 at 17:08
@skirtle 1) Yes there is output in the console when i tried to debug the whole flow, so `filtersUpdate` is called. 2) The watch is called initially when the filters template is created, I am emitting the `formData` object with the number of results per page to get in the `results` template. This works as expected, and the watch is triggered. 3) That was my bad with posting brackets, the watch is actually inside the `export default` object — Otonel, Dec 17 '19 at 17:19
@AndreyPopov Thanks. I'v tried this and it works: `deep: true, handler(){ this.loadData(); }` — Otonel, Dec 17 '19 at 17:29

score 1 · Answer 1 · edited Jul 15 '22 at 00:33

1

Apparently to watch over object properties change, you need a deep watch https://v2.vuejs.org/v2/api/#watch

watch: {
    filters: {
        deep: true,
        handler(){
            this.loadData();
        }
    }
}

edited Jul 15 '22 at 00:33

tony19

125,647
18
229
307

answered Dec 17 '19 at 17:47

Otonel

97
1
10

Vue.js watch not triggering when object is modified

1 Answers1