You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using the UTabs component, a Lazy component is never lazyloaded.
In the reproduction, you can see that the API call from Tab 2 is always called. However, If you put those Lazy components outside the UTabs and change it to selectedTab it works properly, as you can't see the API call.
<scriptsetup>constroute=useRoute();constrouter=useRouter();constitems= [ { key:'tab1', label:'Tab1', content:'This is the content shown for Tab1', }, { key:'tab2', label:'Tab2', content:'And, this is the content for Tab2', },];constselectedTab=computed({get() {constindex=items.findIndex((item) =>item.key===route.query.tab);if (index ===-1) {return0; }return index; },set(value) {router.replace({ query: { tab: items[value].key }, }); },});</script>
<template>
<UTabsv-model="selectedTab" :items="items">
<template #item="{ item }">
<LazyFirstComponentv-if="item.key==='tab1'" />
<LazyApiComponentv-if="item.key==='tab2'" />
</template>
</UTabs>
</template>
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered:
Indeed, I can see that. Perhaps would the unmount prop handle your usecase ? This prop is meant for components not to be mounted unless the current tab is the appropriate one. This improves performance when using heavy components in each tab, and will re-run the request everytime you switch to this tab
Ahhh okido, so if you implemented it then you're more suitable than I for it 😋 however, if you don't have time I can do it. I'll keep the issue open until the upcoming PR is created and merged.
Environment
Version
2.17.0
Reproduction
https://stackblitz.com/edit/nuxt-ui-qs48un?file=app.vue
Description
When using the
UTabs
component, a Lazy component is never lazyloaded.In the reproduction, you can see that the API call from Tab 2 is always called. However, If you put those Lazy components outside the UTabs and change it to
selectedTab
it works properly, as you can't see the API call.Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: