I have the following code that renders a modal
<EditUserModal :key="`EditUserDrawer-${selectedUser.id}`" :user="selectedUser" :opened="modalIsShowing"/>
This is the modal content (simplified, showing only the props)
<script setup lang="ts">
const props = defineProps({
opened: {
type: Boolean
},
user: {
type: Object as PropType<User>,
required: true
}
})
I’m getting an error saying Type User | undefined is not assignable to type User
Now the solution I was thinking of, and I know is wrong, was to add v-if="selectedUser"
to the element, making it look like this: Because of the use of v-if, this causes the modal to not animate open.
<EditUserModal v-if="selectedUser" :key="EditUserDrawer-12" :user="selectedUser" :opened="modalIsShowing"/>
Is there a method in Vue 3 that allows me to not send undefined to this modal, without having to use v-if?