Vue complains about wrong prop type but it makes no sense at all

I make a AJAX request like so;

export default {
  data() {
    return {
      isLoading: true,
      data: {},
    };
  },
  async created() {
    try {
      await this.fetchData(1);
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    async fetchData(page) {
      this.isLoading = true;
      const data = await this.$http.get(
        `/data?page=${page}`
      );
      this.data = data.data;

      this.isLoading = false;
    },
  },
};

I then pass it into a table component I made;

<v-table :loading="isLoading" :data="data.data"></v-table>

I have the props of that component here;

    data: {
      type: [Object, Array],
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },

But Vue complains that Invalid prop: type check failed for prop "data". Expected Object, Array, got Undefined

Which makes absolutely no sense to me. I’m awaiting the promise and inside my table component I have v-if checks for the prop.

I have no idea what is causing this, and the more frustrating part is the code WORKS just fine. Everything works like I expect it to, all data shows in my table just fine, just this annoying type error keeps showing up and it is really quite annoying.

This line is the problem:

<v-table :loading="isLoading" :data="data.data"></v-table>

Initially your data prop is defined as {}, and you are trying to pass data.data to the v-table component. data.data is not defined, so Vue complains that the prop is undefined instead of an object.

Then, in your async fetchData you are doing this.data = data.data, but then you are also passing data.data to the component.

Change that line to this:

<v-table :loading="isLoading" :data="data"></v-table>

And the warnings should go away.

Edit: looking back you say that the table works just fine the way you had it with :data="data.data", in which case my solution above might break the working table. If that’s the case then instead change your initial empty data definition to data: {data: {}} so that data.data exists.

1 Like