Chartjs-Invalid prop: type check failed for prop "chartData". Expected Object, got Null vue.js

by

0👍

At the moment of component creation, testData is null and is immediately passed down to DoughnutChart component as a prop, but DoughtnutChart expects an object, not null, hence why you have an error.

You’re not setting the value of testData until the OnMounted hook, which if you’ve seen the Vue component lifecycle chart, happens some (short) time after component creation.

You either need to make sure testData has a value at the time of component creation, or prevent the rendering of the DoughnutChart component until testData has a value:

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

edit:
In addition, your testData variable is not reactive so it’s value in the template will never actually update from being null. You must assign it’s initial value using ref():

let testData = ref(null);

and update anywhere you use testData in your <script> to be testData.value since it’s now a ref, namely the OnMounted hook:

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

0👍

You need to define the default value of props as null. Because initially, it’s null. So the warning is showing.

Leave a comment