I'm trying to make my function update the data shown on a Vue chart js whenever I click a button, but I keep running into the error message saying that "_vm.chartData is not a function". I followed the guide on using computed properties, but I must be missing something. Can someone assist me with this issue?
Here is the snippet of my code:
<template>
<div>
<Bar
:chart-options="chartOptions"
:chart-data="chartData"
/>
<button v-on:click="chartData()">
Change Data
</button>
</div>
</template>
<script>
import { Bar } from 'vue-chartjs/legacy'
import {
Chart as ChartJS,
Title,
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'BarChart',
components: {
Bar
},
data() {
return {
chartOptions: {
responsive: true,
maintainAspectRatio: false
}
}
},
computed :{
chartData() {
const updatedChartData = {
labels: [
'January',
'February',
],
datasets: [
{
data: [
this.getRandomInt(),
this.getRandomInt(),
]
}
]
};
console.log(updatedChartData.datasets)
return updatedChartData;
},
},
methods:{
getRandomInt() {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
}
}
}
</script>
I would really appreciate any assistance with this. Thank you.