道具無效：道具“chartData”的類型檢查失敗。 預期為 Object，得到 Undefined

Question

編程新手並且在嘗試從虛擬數據呈現圖表時遇到問題。 這是錯誤“無效的道具：道具“chartData”的類型檢查失敗。預期為 Object，未定義”。 基本上將數據從父組件發送到子組件並進行渲染。 在正確發送數據時遇到一些麻煩不知道該怎么做。 父index.vue

<template>
  <bar-chart/>
</template>
<script>
import BarChart from '../components/BarChart.vue'
import fake, { day, profit, total } from '../static/dummy'
export default {
  name: 'App',
  components: { BarChart },
  data(){
    return {
     day : 0,
     profit : 0,
     total : 0,
      chartData: {},
    };
  },
  created(){
    this.getDataa();
  },
  mounted(){
    this.getDataa();
  },
  methods: {
    getDataa(){
      this.day = fake.day;
      this.profit = fake.profit;
      this.total = fake.total
      this.chartData = {
        labels: [this.day],
        datasets: [
          {
            label: "profit",
            data: [this.profit],
            backgroundColor: '#90EE90'
          },
          {
            label: "total",
            data: [this.total],
            backgroundColor: '#68BBE3',
          }
        ],
      }
      },
    },
  computed: {
      getDay :function() {
        return this.day;
      },
      getProfit :function(){
        return this.profit;
      },
      getTotal: function(){
        return this.total;
      }
    },
}
</script>

子BarChart.vue

<template>
  <bar-chart :chart-data ="chartData"></bar-chart>
</template>
<script>
import { Bar } from 'vue-chartjs'
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 },
  props:{
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      options: {
        responsive: true,
        scales: {
          xAxes: [
            {
              stacked: true,
            },
          ],
          yAxes: [
            {
              stacked: true,
            },
          ],
        },
      },
    };
  },
  mounted (){
    console.log(this.chartData);
    this.renderChart(this.chartData, this.options);
  }
}
</script>

虛擬數據dummy.js

  exports.day=[
    {
      id:1,
      day: "9/21",
    },
    {
      id:2,
      day: "9/22",
    },
    {
      id:3,
      day: "9/23",
    },
    {
      id:4,
      day: "9/24",
    },
    {
      id:5,
      day: "9/25",
    },
]
exports.profit = [
  {
    id:1,
    profit:"200",
  },
  {
    id:2,
    profit:"300",
  },
  {
    id:3,
    profit:"400",
  },
  {
    id:4,
    profit:"500",
  },
  {
    id:5,
    profit:"600",
  },
]
exports.total = [
  {
    id:1,
    total:"1000",
  },
  {
    id:2,
    total:"2000",
  },
  {
    id:3,
    total:"3000",

  },
  {
    id:4,
    total:"4000",
  },
  {
    id:5,
    total:"5000",
  },
]

Answer 1

好吧，問題出在不同的地方，我使用 vue.js 2，我的圖表文件是 vue 圖表導入是遺留的，但是當我切換到從 vue-chartjs 導入 bla2 時，遺留的不起作用。 但你的建議幫助@kissu thx