Watching properties in child component does not work

Question

I have 2 components, a parent and a child. I want to modify the value of a prop in my parent component (by calling a method when a button is clicked) and send it to the child component. In the child component, I want to watch for changes in my prop, so that anytime it changes, it does something (for testing purposes, I tried to console.log() the prop).

Parent:

<template>
    <div>
        <h5>Your Feeds</h5>
        <div id="feeds">
            <div class="card" v-for="feed in feeds">
                <div class="card-body" :id="feed['_id']" >
                    {{ feed['name'] }}
                    <button v-on:click="loadFeed(feed['_id'])">Button</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import GridComponent from "./GridComponent";
export default {
    name: "FeedsListComponent",
    data() {
        return {
            feeds: []
        }
    },
    mounted() {
        axios
            .get("/getFeeds")
            .then(response => (this.feeds = response.data))
            .catch(error => console.log(error))
    },
    methods: {
        loadFeed(id) {
            this.feedId = id
        }
    },
    components: {
        GridComponent
    }
}
</script>

Child:

<template>
    <div id="grid">
        <v-grid
            theme="compact"
            :source="rows"
            :columns="columns"
        ></v-grid>
    </div>
</template>

<script>
import VGrid from "@revolist/vue-datagrid";
export default {
    name: "Grid",
    props: ['feedId'],
    data() {
        return {
            columns: [],
            rows: [],
        };
    },
    watch: {
        feedId: function(val, oldVal) {
            console.log(val)
            console.log(oldVal)
            console.log(this.feedId)
            //here I want to send an ajax request with feedId to one of my controllers in order to get  
            //the data needed for rows and colums
        }
    },
    components: {
        VGrid,
    },
};
</script>

@shob Can you explain a little more? What should I do to include the child component? Would including <child :propMessage="message" /> int he parent template be enough? — Daniel
For there to be a parent and a child, the parent has to use the child in its template. For example <div><grid :feed-id="feedId"></grid></div> — Dan

Tim Tim · Accepted Answer · 2021-03-04T22:15:56

I put together a sample that is working in order to help you diagnose why yours isn't working:

Parent.vue

<template>
  <div class="parent">
    <h3>Parent</h3>
    <div class="row">
      <div class="col-md-6">
        <button class="btn btn-secondary" @click="incrementCounter">Change parent message</button>
      </div>
    </div>
    <child :propMessage="message" />
  </div>
</template>

<script>
  import Child from '@/components/stackoverflow/watch-prop/Child'

  export default {
    components: {
      Child
    },
    data() {
      return {
        counter: 0
      }
    },
    computed: {
      message() {
        return 'Message' + this.counter;
      }
    },
    methods: {
      incrementCounter() {
        this.counter++;
      }
    }
  }
</script>

Child.vue

<template>
  <div class="child">
    <hr>
    <div class="row">
      <div class="col-md-6">
        <label>Message in child from watched prop:</label>{{ dataMessage }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      propMessage: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        dataMessage: this.propMessage
      }
    },
    watch: {
      propMessage(newMessage) {
        this.dataMessage = newMessage;
      }
    }
  }
</script>

<style scoped>
  label {
    font-weight: bold;
    margin-right: 0.5rem;
  }
</style>

Watching properties in child component does not work

1 Answers