Vue Chart.js点击按钮更新图表数据报错：_vm.chartData is not a function

错误原因 #

你定义的chartData是计算属性（computed），它本质是一个响应式属性而非可调用的函数。按钮点击时调用chartData()，相当于把属性当函数用，因此触发该报错。

解决步骤 #

计算属性会自动跟踪依赖的响应式数据，当依赖变化时重新计算。要实现点击按钮更新图表，需要：

• 在data中添加一个触发更新的响应式变量
• 让chartData依赖这个变量
• 按钮点击时修改该变量，触发计算属性重新生成数据

修改后的完整代码 #

<template>
  <div>
    <Bar
      :chart-options="chartOptions"
      :chart-data="chartData"
    />
    <!-- 修改点击事件，调用新增的方法 -->
    <button v-on:click="refreshChart">
      Change Data
    </button>
  </div>
</template>

<script>
import { Bar } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: {
    Bar
  },
  data() {
    return {
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      },
      // 新增：触发更新的响应式变量
      refreshTrigger: 0
    }
  },
  computed :{
    chartData() { 
      // 依赖refreshTrigger，变量变化时重新计算
      this.refreshTrigger;
      const updatedChartData = {
          labels: [
            'January',
            'February',
            
          ],
          datasets: [
            {
              data: [
                this.getRandomInt(),
                this.getRandomInt(),
              ]
            }
            ]
        };
      console.log(updatedChartData.datasets)
      return updatedChartData;
    },
  },
  methods:{
    refreshChart() {
      // 修改触发变量的值，触发computed重新计算
      this.refreshTrigger += 1;
    },
    getRandomInt() {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

关键修改点说明 #

• 新增refreshTrigger响应式变量，作为计算属性的依赖
• 按钮点击事件改为调用refreshChart方法，通过修改refreshTrigger的值触发计算属性更新
• 在chartData计算属性中引用this.refreshTrigger，让计算属性跟踪该依赖

这样点击按钮时，refreshTrigger变化会触发chartData重新生成包含随机数的新数据，图表就会自动更新，同时解决了原有的函数调用报错问题。

内容的提问来源于stack exchange，提问作者Guts