Vue3中使用vue-chartjs LineChart出现TypeError报错求助

1. 修正Props定义错误 #

你的props写法不符合Vue3规范，直接赋值pending: false这类写法无法正确设置默认值，会导致组件渲染时机异常。修改为标准的props对象格式：

props: { 
  pending: {
    type: Boolean,
    default: false
  },
  showCountryModal: {
    type: Boolean,
    default: false
  },
  countryDetails: {
    type: Object,
    default: () => ({}) // 提供默认空对象，避免访问属性时报错
  },
  countryCodeStats: {
    type: Object,
    default: () => ({})
  },
  selected_country: {
    type: Object,
    default: () => ({})
  },
  edits: {
    type: Boolean,
    default: false
  },
  allGroupNames: {
    type: Object,
    default: () => ({})
  },
},

2. 避免变量名冲突 #

组件内部data()返回的data变量和Vue实例内置属性存在潜在命名冲突，将其重命名为chartData：

data() {
  return {
    chartData: { // 重命名为chartData
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, 
    options: {
      responsive: true
    }
  }
},

同时更新模板中的引用：

<Line :data="chartData" :options="options" />

3. 添加条件渲染确保数据可用 #

给Line组件增加条件判断，确保传入的图表数据对象及datasets存在时再渲染：

<Line v-if="chartData && chartData.datasets" :data="chartData" :options="options" />

4. 优化Chart.js注册逻辑 #

将ChartJS的组件注册移到项目main.js中全局注册，避免组件内重复注册：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

createApp(App).mount('#app')

之后移除组件内的ChartJS注册代码即可。

内容的提问来源于stack exchange，提问作者Amode Habeeb Damilare