[SOLVED] Don't render component until shown, but then don't destroy when hidden

Don't render component until shown, but then don't destroy when hidden

I have a tabbed interface and I don't want the component on the 2nd tab to render until the 2nd tab is selected. However, I don't want the component to be destroyed (only hidden) when the 1st tab is selected.

v-show will cause the component to be rendered as soon as the page opens and not wait until the tab is selected. v-if will cause the component to be rendered at the correct point, but will then destroy and recreate it as the user navigates back and forth.

The reason I want this functionality is that I have a 3rd party component that gets the height of its parent on first render and sizes itself to fit. If it's rendered while on a hidden tab, the parent doesn't have any height and so it looks wrong when it's shown. If I use the v-if technique, it displays correctly, but it loses state, e.g. scroll position, each time the user navigates away from it. The same component works perfectly on the 1st tab as it gets the height on first render and then is just hidden and shown as needed.

I'm relatively new to vue so not sure if this is possible. I vaguely remember having something like this in react a couple of years ago where it wouldn't render the component until it was first shown, essentially a deferred render.

Solution

Consider using a boolean for each page that is triggered once upon clicking the tab, triggering a v-if.

import { ref } from 'vue';
tab1Loaded = ref(false);
currentTab = ref(0);
...
<button @click="tab1Loaded = true; currentTab = 1;"></button>
<template v-if="tab1Loaded">
    <tab1 v-show="currentTab === 1"></tab1>
</template>