Update Chart with computed property, how does reactiveData work?

I’d like to update the chart data but I need to transform the data so I’m using a computed property. With that I can’t use the reactiveProp as mentioned in the docs: https://vue-chartjs.org/guide/#updating-charts right? But how to use reactiveData?

I’m now using this:

import { HorizontalBar } from "vue-chartjs";

export default {
    extends: HorizontalBar,
    props: ["chartdata"],
    watch: {
        chartdata: function() {
            this.$data._chart.data.datasets = this.datasets;
            this.$data._chart.update();
        }
    },
    computed: {
        datasets: function() {
            let datasets = [];
            for (let key in this.chartdata) {
                datasets.push({
                    data: [this.chartdata[key]],
                    backgroundColor: "#123456"
                });
            }
            return datasets;
        }
    },
    mounted() {
        this.renderChart(
            {
                datasets: this.datasets
            },
            {
                ...
            }
        );
    }
};

Can this be done easier or cleaner?

[royduin]

It’s a while back, just looked up the code and it’s the same.

[dizid]

@royduin Hi Roy, Did you solve this? Would you be willing to share some code if you found a solution? I am having the exact same ‘challenge’: vuefire data in copmputed properties. The v-if=“loaded” i couldn’t get to work. Leuke website heb je!