NuxtN
Nuxt•15mo ago
eym

using ref alongside conditional rendering (useTemplateRef + v-if)

Hi, in my situation I have some component that will be rendered conditionally. I also need to assign the useTemplateRef() for each one of them that I will be calling functions exported using defineExpose(). The problem is that useTemplateRef or ref can not be assigned to the component if the component is not rendered at first. One solution is to use v-show but that doesn't really satisfy me and I don't want the other components shown in devtools. 

<script setup lang="ts">
import CheckMobile from '~/components/pages/auth/CheckMobile.vue';
import VerifyMobile from '~/components/pages/auth/VerifyMobile.vue';

const status = ref<Status>(Status.CHECK_MOBILE); // enum

const VerifyMobileRef = useTemplateRef<InstanceType<typeof VerifyMobile>>('verifyMobile');

const onMobileChecked = () => {
  status.value = Status.VERIFY_MOBILE;
  VerifyMobileRef.value?.startCountdown(); // Doesn't work
};
</script>

<template>
    <CheckMobile
      v-if="status === Status.CHECK_MOBILE"
      @mobile-checked="onMobileChecked"
    />
    <VerifyMobile
      v-if="status === Status.VERIFY_MOBILE"
      ref="verifyMobile"
    />
<template>
Was this page helpful?