I am currently developing an application using Quasar/Vue. In my component, I am passing the "organisation" object to it.
<q-tab-panel name="roles">
<OrganisationRolesTab :organisation="organisation"></OrganisationRolesTab>
</q-tab-panel>
Within OrganisationRolesTab.vue, I define the prop "organisation" using the defineProps generic notation:
<template>
{{ organisation }}
</template>
<script setup lang="ts">
import { IOrganisation } from 'src/interfaces/IOrganisation'
defineProps<{ organisation: IOrganisation | false }>()
</script>
The structure of IOrganisation is as follows:
export interface IOrganisation {
id?: string
title: string
shortTitle: string
createdAt?: Date
updatedAt?: Date
}
Upon implementation, a warning appeared in the console:
runtime-core.esm-bundler.js?f781:38 [Vue warn]: Invalid prop: type check failed for prop "organisation". Expected Null | Boolean, got Object
at <OrganisationRolesTab organisation= {id: '94de89d3-38f2-4410-bf86-74db781b18aa', createdAt: '2022-06-13T15:11:45.185Z', updatedAt: '2022-07-03T14:24:26.103Z', title: 'Test organisation', shortTitle: 'test'} >
at <QTabPanel name="roles" >
at <BaseTransition appear=false persisted=false mode=undefined ... >
at <Transition name="q-transition--slide-right" >
at <QTabPanels modelValue="roles" onUpdate:modelValue=fn animated="" >
at <OrganisationEdit onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > >
at <RouterView>
at <QPageContainer class="q-ma-sm" >
at <QLayout view="lHh Lpr lFf" >
at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {$i18n: {…}, $t: ƒ, $rt: ƒ, …} > >
at <RouterView>
at <App>
How can I resolve this warning without compromising the typing?