CODEWITHSUNDEEP
vue.jswatchprop
GNG
GNG

Reputation: 1531

How to listen for changes to props that are objects in vuejs

Why does my code for watching an object prop not work in vuejs?

I have browsed other Q/A posts about this issue and have not found a solution that works for me.

In my child component, I have am watching the filters prop like this...

export default {
  name: "ChildComponent",
  props: ["list", "searchTerms", "filters"]

  watch: {
    filters: {
      deep: true,
      handler: () => {
        console.log("filter updated");
        if (this.voterLayerActive) {
          this.fetchBoundaryBox();
          this.createMapWithLeafletAndMapTiler();
        }
      }
    }

In my parent component, I am passing the filters prop like this...

       <template> ...<ContactsMap :filters="f"></ContactsMap> ...</template>

<script>
...
export default {
  name: "ParentComponent",

  data() {
    return {
      f: {},
      ...
....
</script>

Upvotes: 0

Views: 242

Answers (1)

webprogrammer
webprogrammer

Reputation: 2477

Try to replace your watch handler arrow function with:

  watch: {
    filters: {
      deep: true,
      handler(){
        console.log("filter updated");
        if (this.voterLayerActive) {
          this.fetchBoundaryBox();
          this.createMapWithLeafletAndMapTiler();
        }
      }
    }

Upvotes: 1

Related Questions