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? stackoverflow.com/questions/42133894/… — Andrey Popov
– Andrey Popov, Commented Dec 17, 2019 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
– skirtle, Commented Dec 17, 2019 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
– Otonel, Commented Dec 17, 2019 at 17:19
@AndreyPopov Thanks. I'v tried this and it works: deep: true, handler(){ this.loadData(); } — Otonel
– Otonel, Commented Dec 17, 2019 at 17:29

tony19 · Accepted Answer · 2022-07-15 00:33:08Z

2

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, 2022 at 0:33

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 17, 2019 at 17:47

Otonel

1171 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js watch not triggering when object is modified

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related