I have customized a modal component with the following template:
<template>
<my-base-modal ref="BaseModal" :width="1000">
<template v-slot:header>Details</template>
<template v-slot:body>
<detail-card ref="DetailCard"></detail-card>
</template>
</my-base-modal>
</template>
This setup creates a base modal that overrides the slots for header and body. The content of the body slot is a sub-component which needs to fetch some data.
I attempted to open and load the content of this modal using the method below:
open (id) {
this.$refs.DetailCard.load(id)
this.$nextTick(() => {
this.$refs.BaseModal.open()
})
}
However, this.$refs.DetailCard always returns as undefined. I suspect this is because the reference to DetailCard is defined within the body slot of the <base-modal> component?
How can I execute a function on the <detail-card> component in this scenario, without using EventBus or passing props into it?