[Vuejs]-What is the best practice to pass null to a required props in component in vuejs?

3πŸ‘

βœ…

If you are using composition API with Typescript, you should be able to define your props this way:

import { GeographicCoordinate } from '@/interfaces/type';

const props = defineProps<{
  show: boolean;
  geographicCoordinate: null | GeographicCoordinate;
}>();

Using Typescript definition you can more easily define your prop types and use null as a prop type. If you happen to use null as a prop type in options API, it will only disable prop type checking at runtime.

Also, you can conditionally display your component depending of whether your geographicCoordinate are defined or not, and this way you don’t need to assert and check that both types could be used within your component

πŸ‘€nook

0πŸ‘

You can handle component1 visibility by v-if, when show is false or geographicCoordinate is null, the component is not display and processing data.

Leave a comment