Child component not receiving props from parent after data is updated in parent

Question

I have this template called Report.vue, and in that template I also have the data() property called dataSent:[]. In said template, I call the component BarChart, to which I'm trying to pass the dataSent array with updated elements like dataSent[1,2,3,4,5...] to the component (BarChart) so it can display graphs. However when I add console.log to BarChart, it never receives the updated props. I suspect somehow it has to do with events, but since I'm a newbie and still haven't fully understood how it works, was wondering if I could get some help

Since the dataSent:[] is initialized to an empty array, makes sense that the BarChart component doesn't show anything from the start, but then, I have created a method (in the methods section), called updateData(), which explicitly fills the dataSent with [12, 19, 3, 5, 2,8]. And certainly, I'm using the props bind to the component Barchart (this one is called data) which is bound to the dataSent array. Finally, in the html section, an @input event in a component called GPSelect is what it's suppose to trigger the change (updating the dataSent array), however, as mentioned, does happen in the parent (Report.vue), but not in the child component (BarChart).

Report.vue

<v-flex lg4 sm12 xs12>
            <div class="selectOptions">
                <GPSelect 
                    @input="listSessions" 
                    v-model="programSelected" 
                    :items="programs" 
                    label="Programs" 
                    :disabled="programs === undefined || programs.length === 0" 
                />
            </div>
        </v-flex>

        <BarChart
                :label="label"
                :data="dataSent"
                :labels="labels"       
        />

data() {
        return {

            treatments: [],
            programs: [],
            programSelected: "",
            dataSent: [],
            label: "Number of sessions",
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
        }
    },

    methods: {

        async listSessions() {
         /*...some other sentences irrelevant */

            this.updateData();
        },

   updateData() {
            this.dataSent=[12, 19, 3, 5, 2,8];
            return this.dataSent;
        },

BarChart.vue

<template>
<div class="chart-container">
    <canvas id="barChart" ref="barChart">

    </canvas>
</div>
</template>

<script>
import Chart from "chart.js";

export default {

    props: {
        labels: Array,
        colors: Array,
        data: Array,
        label: ""
    },
    mounted() {

        this.displayChart();
    },
    methods: {
        displayChart() {
            console.log(this.data);
}

}

I expect the console.log from Barchart to display the updated array (the this.data received) sent from the parent component Report.vue, but currently, it shows [__ob__: Observer]

Have you tried adding a watch on the data prop within BarChart? The code you've provided won't log the new value for the data prop because it only calls displayChart in mounted. The mounted hook will only be called once when the component is first rendered. watch: { data () { console.log(this.data) } } — skirtle

kengres kengres · Accepted Answer · 2019-08-01T07:02:33

BarChart.vue

<template>
  <div class="chart-container">
    <canvas id="barChart" ref="barChart" />
  </div>
</template>

<script>
import Chart from "chart.js";

export default {
  props: {
    labels: Array,
    colors: Array,
    data: Array,
    label: ""
  },
  mounted() {
    this.displayChart();
  },
  watch: {
    'data': 'displayChart'
  },
  methods: {
    displayChart() {
      console.log(this.data);
    }
  }
}

Try this :))

Child component not receiving props from parent after data is updated in parent

1 Answers