Component inside VaModal cannot be assigned ref

[beard7]

Vuestic-ui version: 1.10.3

Description

I'm trying to make some components (usually data tables) that can be optionally displayed in a modal. No problem so far... just wrap the VaModal around the component.

However, the component exposes one or mire functions that need to be called by the parent. This is where the problem starts. Assigning a ref to a component inside VaModal is always undefined, so the exposed functions can't be called.

Reproduction

<template>
  <VaModal v-model="showModal">
    <component ref="myComponent" :some-prop="true">
  </VaModal>
</template>

<script setup>
import ...

const myComponent = ref(null);

myComponent.value.exposedFunction() // error myComponent.value is undefined

Any ideas?

[m0ksem]

First of all, you need to wait until the component is mounted. Second, make sure modal is visible. VaModal will not render any child component until modal is shown e.g. v-model must be true.

https://ui.vuestic.dev/play#eNp9UcFu2zAM/RVClyZAYh9685IC29DDBnQbtmEnXQybSdXJlCBRXoYg/z5KTrxsaHswYD3y8T0+HtVb76sxoWrUJnbBeIaInPydJgAzeBcYjhBwtwJHDy4RYw8n2AU3wI3wbjRp6hxFhuH3eycEQmLYZsqCkrXLN3lS/mb+YrGE7R0cMwiZ6yxW1u0XVxOqsbUJl4V4Wmra1JM78SUPxsHblrG43PxoH1zfWogs0C5ZaAbXo12XEVutOCTUqvRKd2/GbE7wKzmtoIluwLUPzs8UqCeB+qwgr019pa1JrdQU0npoffUUHUmQZTF9LkStmvOqgklikU23TibDWj0y+9jUdTL5CLlU9TjWlzaXuB5aQzJZqxKFppNocpTYdmb/n2In6xiL4bNnI7H+o9xa6359LFhebnXBu0fsfj6DP8XDZPFLwIhhlDjmGrdhj5JZLt9/+4QH+Z+Lkn2y0v1K8SvKyVP2OLW9S9SL7au+4vZDCdDQ/nu8PzBSvCxVrpPTKP0l1XzJl1b/a/e2up1TPP0B88//pQ==