这是我在运行此代码时遇到的错误。[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>
1条答案
按热度按时间h6my8fg21#
在创建组件时，
testData为null，并立即作为prop传递给DoughnutChart组件，但DoughtnutChart需要一个对象，而不是null，因此出现错误。在
OnMounted钩子出现之前，您不会设置testData的值，如果您已经看到Vue组件生命周期图表，则会在组件创建之后的一段时间（很短的时间）出现OnMounted钩子。您需要确保
testData在创建组件时具有值，或者在testData具有值之前阻止呈现DoughnutChart组件：编辑：
另外，你的
testData变量不是React性的，所以它在模板中的值永远不会从null更新。你必须用ref()来赋值它的初始值：并将
<script>中使用testData的任何地方更新为testData.value，因为它现在是一个ref，即OnMounted挂钩：