Setup: Vue.js (3.2) with Composition API, TypeScript, and Visual Studio Code
File type.ts:
export class GeographicCoordinate {
latitude: number;
longitude: number;
altitude?: number;
constructor(latitude: number, longitude: number, altitude?: number) {
this.latitude = latitude;
this.longitude = longitude;
this.altitude = altitude;
}
}
Component1.vue:
import { GeographicCoordinate } from '@/interfaces/type';
const props = defineProps({
show: { type: Boolean, required: true },
geographicCoordinate: {
type: Object as PropType<GeographicCoordinate | null>,
required: true }
});
Page.vue:
<template>
<component1
v-model:show="show"
:geographic-coordinate="clickedGeographicCoordinate" @save-event="saveEvent">.
</component1>
</template>
<script lang="ts" setup>
import { GeographicCoordinate } from '@/interfaces/type';
var show = ref(false);
var clickedGeographicCoordinate = ref<GeographicCoordinate | null>(null);
</script>
The initial value of clickedGeographicCoordinate is set to null but it will be populated based on user interaction.
The variable show controls the visibility of Component1. When show is true, clickedGeographicCoordinate is expected to have a valid value. However, Vue throws a warning in the browser:
[Vue warn]: Invalid prop: type check failed for prop "geographicCoordinate". Expected Object, got Null
How can this situation be addressed effectively?