道具无效：道具“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