eym Posts - Answer Overflow

eym

•Created by eym on 10/13/2024 in #❓・help

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>

<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>

3 replies

Gaming

Programming