teambit / bit

A build system for development of composable software.
https://bit.dev
Other
17.89k stars 929 forks source link

Expected T, got Object in Vue-Prop of custom Object-Type #3591

Closed ahoiroman closed 3 years ago

ahoiroman commented 3 years ago

Description

Hello there,

I got a Vue-component like this:

<template>
    ...
</template>

<script>

import CustomItem from "../../../../objects/CustomItem";

export default {
    name: "Test",
    props: {
        item: {
            type: CustomItem,
        },
    },
};
</script>

As you can see, this component requires the prop to be a specific object.

This is the CustomObject

export default class CustomItem {
    constructor ({id, name}) {
        this.id = id;
        this.name = name;
    }

   // provide cool functions here
}

This works fine in my project, but not if I include this this way:

<template>
    <div v-if="!$wait.is('item.loading')">
        <MyComponent :item="item"/>
    </div>
</template>

<script>
import MyComponent from '@bit/myproject.my-component'
import CustomItem from '@bit/myproject.custom-item';

export default {
    name: 'Home',
    components: {MyComponent},
    data () {
        return {
            item: {}
        };
    },
    beforeRouteEnter (to, _from, next) {
        const promises = [
            axios.get (`/api/item/1`)
        ];

        next (vm => {
            vm.$wait.start ('item.loading');
            axios.all (promises)
            .then (([itemRes]) => {
                vm.item = new CustomItem(itemRes.data.data);
            }).finally(()=>{
                vm.$wait.end ('item.loading');
            });
        });
    },
};
</script>

In this case I get this error:

[Vue warn]: Invalid prop: type check failed for prop "item". Expected T, got Object 

found in

---> <MyComponent> at resources/js/components/Items/MyComponent.vue

What did I miss here?

itaymendel commented 3 years ago

this seems like an issue that is not related specifically to Bit. if i'm wrong, please reopen.