无效道具：道具“chartData”的类型检查失败。预期的对象，得到 Null vue.js

Question

这是我在运行此代码时遇到的错误。 [Vue warn]：无效的道具：道具“chartData”的类型检查失败。预期对象，为空

这就是我调用 vue-chartjs 组件的方式

<div class="">
   <DoughnutChart :chartData="testData" ref="doughnutRef" />
</div>

这是我使用图表组件的同一文件的脚本 在这里，我在开始时初始化了图表数据，然后在对数据进行一些计算后尝试使用 api 数据更新图表数据。 就像我想看看有多少男性和女性。 数据来自 firebase。

<script>
import UserList from "@/components/UserList.vue";
import { defineComponent, onMounted, ref } from "vue";
import { DoughnutChart } from "vue-chart-3";
import { Chart, registerables } from "chart.js";
import { db } from "@/firebase";
import {
  collection,
  getDocs,
  deleteDoc,
  doc,
  onSnapshot,
} from "firebase/firestore";

Chart.register(...registerables);

export default {
  name: "Home",
  components: { UserList, DoughnutChart },
  setup() {
    const doughnutRef = ref([]);
    let testData = null

    onMounted(() => {
      onSnapshot(collection(db, "users"), (querySnapshot) => {
        const updateChartArray = [];
        let totalFemale = 0;
        let totalMale = 0;
        querySnapshot.forEach((doc) => {
          if (doc.data()["Gender"] === "M") {
            totalMale = totalMale + 1;
          } else {
            totalFemale = totalFemale + 1;
          }
        });
        updateChartArray.push(totalFemale);
        updateChartArray.push(totalMale);
        doughnutRef.value = updateChartArray;
      });

      testData = {
        labels: ["Female", "Male"],
        datasets: [
          {
            data: doughnutRef.value,
            backgroundColor: ["#77CEFF", "#0079AF"],
          },
        ],
      };
    });

    return { testData,doughnutRef };
  },
};
</script>

Answer 1

在组件创建时，

testData

为 null 并立即作为 prop 传递给

DoughnutChart

组件，但

DoughtnutChart

需要一个对象，而不是 null，因此会出现错误。

在

testData

钩子之前，您不会设置

OnMounted

的值，如果您看过 Vue 组件生命周期图表，则该钩子会在组件创建后的一段（短）时间内发生。

您需要确保

testData

在创建组件时具有值，或者阻止渲染

DoughnutChart

组件，直到

testData

具有值：

<DoughnutChart v-if="testData" :chartData="testData" ref="doughnutRef" />

编辑：
此外，您的

testData

变量不是反应性的，因此模板中的值永远不会真正从

null

更新。您必须使用

ref()

:

为其分配初始值

let testData = ref(null);

并将

testData

中使用

<script>

的任何位置更新为

testData.value

，因为它现在是一个引用，即 OnMounted 挂钩：

onMounted(() => {
      testData.value = {
        labels: ['Female', 'Male'],
        datasets: [
          {
            data: doughnutRef.value,
            backgroundColor: ['#77CEFF', '#0079AF']
          }
        ]
      };
    });

Answer 2

您需要将 props 的默认值定义为 null。因为最初它是空的。所以显示警告。