TypeError: child._updateFromParent is not a function

[balibou]

Expected Behavior

When I update chart data, I want the chart to be updated.

Actual Behavior

When I update chart data, I get the error TypeError: child._updateFromParent is not a function
(I tried to pass data throught event, vuex, and even tried to forceUpdate)

This is an error I got with the reactive prop example too (so I used reactive data example).

Environment

• vue.js version: 2.1.8
• vue-chart.js version: 2.5.0
• npm version: 3.10.9

[apertureless]

Well could be related to #59 however @whatya closed the issue.

But same as there, a minimal repo for reproduction or jsfiddle would be helpful. Or at least some code snippets.

[balibou]

Of course, here is a gist I did @apertureless: https://gist.github.com/balibou/2b5c3110fd52d217d4141c323a9b7787

There is a parent component (Dashboard.vue) with 2 child components (TopStats and LineChart).
The TopStats renders new data with checkboxes. When a checkbox is clicked, it will update first rendered data with new ones.

If I try to update data, then I have the error: TypeError: child._updateFromParent is not a function

[apertureless]

Well I guess, it's a bug in your code, rather then in vue-chartjs.

this.$forceUpdate() is not required. This only forces the vue vm to update. It has nothing to do with Chart.js.

I am a bit confused, why you have a LineChart.vue and a LineChart.js
And the vue file only contains the js file 😕

If you want to use vue files, you can use it like this:

LineChart.vue:

<script>
import { Line } from 'vue-chartjs'

export default Line.extend({
  props: ['options', 'chartData'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
})

</script>

Are you sure that this.$parent.$store.getters.chart returns your data?
Because I would guess that because you wrapped the LineChart.js into the LineChart.vue this.$parent would be the LineChart.vue .

I also don't see how the chart should update in your example.
You are using the reactiveData mixin and you created a data model for the chartData (well thats actually redundant, because the mixin creates the data model by itself)

In your created() hook you call your fillChartWithData() method. And fill the data model with data from your vuex store.

And ... thats it. The reactiveData mixin creates a vue watch on the data model chartData.
But... you never update your chartData. You only call the method once in your created hook and thats it. So the chart would never update.

[balibou]

Ok thanks for your feedback, I will try to fix it today with your explanation.

[apertureless]

I guess a cleaner way would be to pass your chartData as a prop .
Because this way you can reuse your line-chart component. As it is only responsible to render the data you pass in.

And if you're using vuex you can then map the getters and pass it as a prop.

import { mapGetters } from 'vuex'

export default {
	computed: mapGetters([
    	    'chartdata'
  	])
}

and then pass it as a prop to the line chart.

However, I am not sure if you can use the reactiveProp mixin there, because of the limitations on how to mutate arrays and objects.

However you could then work with a eventbus and listen on a 'update:chart' event and then manually either call this._chart.update() or rerender it.

[balibou]

Ok thanks for a lot.
Will give you my feedback in few hours :)

[balibou]

Still not working ...

I took examples (reactive data and reactive props) from this repo.
Both examples are well working when using index.html at the root of the repo.

The issue appears when I want to include this logic inside a parent vue component, I have this error of child._updateFromParent ...

[apertureless]

Yeah, but this erros seems to be vue related not vue-chartjs related, thus I think that you have a bug or missusage somewhere in your code. And without a running example, where I could debug, I can't really help you.

[johnmerced-ks]

I'm also having this problem. I'm using vuex, and I noticed that when I remove the following piece of code, the error goes away:

beforeMount() {            
            this.$store.dispatch('getDashboardStats')
            this.$store.dispatch('getUsers')
            this.$store.dispatch('getLocations')
            this.$store.dispatch('getBuildingsByLocation')            
}

And this is how my vuex actions looks like:

getLocations({commit}) {
        return new Promise((resolve, reject) => {
            Vue.axios.get('location/getbyuser')
                .then(response => {
                    commit('SET_LOCATIONS', response.data)
                    resolve(response)
                })
                .catch(error => {
                    reject(error)
                })
        })
    }

Also, for testing purposes, I have the data for the chart hardcoded on data(), like:

d: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    datasets: [
        {
            label: 'Score',
            backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
    ]
}

Maybe some conflicts with vuex?

[apertureless]

Well yet again, without a working example to debug, I can't really help.
I don't know what your methods do, I don't know in which components they are etc.

For me this erros seems more related to vuex / vue lifecycle.

Generally vue-chartjs is working with vuex.

Sample project:
https://github.com/apertureless/vue-chartjs-vuex

[johnmerced-ks]

Updating my packages to its latest versions seems like fixed the problem.
[email protected]
[email protected]

I was using:
[email protected]
[email protected]

[johnmerced-ks]

Btw, using your example, I'm getting the following warning:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

[apertureless]

Was a version mismatch of vue-chartjs.

[philliskiragu]

@apertureless I have the same issue as mentioned. When I load my page for the first time with the logged in user, I get the correct data, no errors, but when I select another user I get the error as above. If I remove the chart code the data loads fine. Here is the code gist