无效的属性：属性“chartData”的类型检查失败,预期对象，得到空值vue.js

h9vpoimq 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(280)

这是我在运行此代码时遇到的错误。[Vue警告]：无效的属性：属性“chartData”的类型检查失败。应为对象，但得到空值
这就是我调用vue-chartjs组件的方式

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

这是我使用chart组件的同一个文件的脚本。在这里，我在开始时初始化了chartdata，然后在对数据做了一些计算后，我试图用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>

chart.js

来源：https://stackoverflow.com/questions/73585766/invalid-prop-type-check-failed-for-prop-chartdata-expected-object-got-null

1条答案

按热度按时间

h6my8fg21#

在创建组件时，testData为null，并立即作为prop传递给DoughnutChart组件，但DoughtnutChart需要一个对象，而不是null，因此出现错误。
在OnMounted钩子出现之前，您不会设置testData的值，如果您已经看到Vue组件生命周期图表，则会在组件创建之后的一段时间（很短的时间）出现OnMounted钩子。
您需要确保testData在创建组件时具有值，或者在testData具有值之前阻止呈现DoughnutChart组件：

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

编辑：
另外，你的testData变量不是React性的，所以它在模板中的值永远不会从null更新。你必须用ref()来赋值它的初始值：

let testData = ref(null);

并将<script>中使用testData的任何地方更新为testData.value，因为它现在是一个ref，即OnMounted挂钩：

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

赞(0）回复(0）举报 2022-11-09

我来回答

无效的属性：属性“chartData”的类型检查失败,预期对象，得到空值vue.js

1条答案

相关问题

热门标签

最新问答