Chartjs-Chart.js in a Vue page throws error: do not mutate vuex store state outside mutation handlers

by

1👍

✅

Regarding the chart updates:

When the data point is added in the modal, emit a custom event to the parent component, that will call getData.

<Modal v-if="showModal" @dataPointAdded="getData">

Within the Modal:

AddDataPoint(data) {
   /* Add data point */
   this.$emit("dataPointAdded");
}

To update the chart component with the new data – add a watcher:

props: ['data', 'options'],
mounted() {
  this.renderChart(this.data, this.options)
},
watch: 
{
    data() {
        this.$data._chart.update();
    },
    options() {
        this.$data._chart_update();
    }
}

See the docs here: https://vue-chartjs.org/guide/#troubleshooting

Own Watcher

Leave a comment