Description
Hello everyone,
I am excited to showcase my Vue-components on bit.dev.
Here is a Vue-component snippet:
<template>
...
</template>
<script>
import CustomItem from "../../../../objects/CustomItem";
export default {
name: "Test",
props: {
item: {
type: CustomItem,
},
},
};
</script>
This component specifically requires the prop to be a certain object.
This object is known as CustomObject
export default class CustomItem {
constructor ({id, name}) {
this.id = id;
this.name = name;
}
// provide cool functions here
}
This setup works perfectly in my own project. However, when I try to include it like this:
<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 scenario, I encounter the following 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 could be causing this issue?
Edit
Upon closer inspection, I realized that the component @bit/myproject.my-component provided by bit.dev offers a packed and minified version of my component. In this minimized version, the prop structure appears like this:
props:{item:{type:function t(e){var n=e.id,r=e.name})...
It seems like this might be the root cause of the problem.