Uncaught (in promise) TypeError: this.renderChart is not a function at Proxy.mounted

TypeError: this.renderChart is not a function at Proxy.mounted"/>

Uncaught (in promise) TypeError: this.renderChart is not a function at Proxy.mounted

错一个

ChartBar.vue?05e0:36

   Uncaught (in promise) TypeError: this.renderChart is not a function
at Proxy.mounted (ChartBar.vue?05e0:36:1)
at eval (runtime-core.esm-bundler.js?d2dd:2738:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:157:1)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:166:1)
at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?d2dd:2713:1)
at flushPostFlushCbs (runtime-core.esm-bundler.js?d2dd:343:1)
at flushJobs (runtime-core.esm-bundler.js?d2dd:397:1)

错误二

   [Vue warn]: Unhandled error during execution of mounted hook 

在

我找不到这两个错误的解决方案，我将不胜感激

图表栏.vue

<template>
  <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
</template>

<script>
import { Bar } from "vue-chartjs";

import {
  Chart as ChartJS, 
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from "chart.js";
//import { LibraryTemplatePlugin } from "webpack";

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

export default {
  name: "ChartBar",
  components: { Bar },
  props: {
    chartOptions: { type: Object, default: null },
    chartData: { type: Object, default: null },
  },
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  },
};
</script>

仪表板.vue html

<div>
          <ChartBar
            v-if="loaded"
            :chart-data="chartData"
            :chart-options="chartOptions"
          ></ChartBar>
        </div>

剧本

<script>
import RacentCandidateRow2 from "../components/RacentCandidateRow copy.vue";
import ChartLine from "@/components/ChartLine.vue";
import ChartBar from "@/components/ChartBar.vue";

import axios from "axios";

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from "chart.js";
//import { LibraryTemplatePlugin } from "webpack";

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

export default {
  name: "DashboardView",
  components: {
    RacentCandidateRow2,
    ChartBar,
    ChartLine,
  },

  data() {
    return {
      ChartBar: [],
      chartData: { type: Array },
      chartOptions: { type: Array },
      loaded: false,
    };
  },

  async mounted() {
    this.loaded = false;
    await axios
      .get("/api/dashboard")
      .then((response) => {
        const ChartBarName = (this.ChartBar = response.data.Funnel_Name);
        const ChartBarNumber = (this.ChartBar = response.data.Funnel_Number);
        this.loaded = true;
        this.chartData = {
          labels: ChartBarName,
          datasets: [
            {
              data: ChartBarNumber,
              backgroundColor: ["rgba(51, 97, 255)", "rgba(51, 97, 255)"],
              borderColor: ["rgba(51, 97, 255)"],
              borderWidth: 1,
              borderRadius: 10,
            },
          ],
        };

        this.chartOptions = {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                display: false,
              },
              border: {
                display: false,
              },
            },
            x: {
              ticks: {
                font: {
                  size: 13,
                },
              },
              grid: {
                display: false,
              },
              border: {
                display: false,
              },
            },
          },
          plugins: {
            legend: {
              display: false,
            },
          },
        };
        this.loaded = true;
      })

      .catch((error) => {
        console.error(error);
      });
  },
};
</script>