[Vuejs]-BootstrapVue's b-nav with lazy loading

by

0👍

✅

I solved it like this:

I created a component for the tab content:

Template:

<div class="tab-content">
  <TabContent
    v-for="(item, index) in myItems"
    class="tab-pane"
    :class="{ active: $route.hash === '#tab' + item.Id || (index === 0 && $route.hash === '') }"
    :key="item.Id"
    :tab-content="item"
  />
</div>

In the new TabContent component, I check:

Template:

<template>
    <div>
        <!-- no "pre-loading" -->
        <TabContent1
            :v-if="$route.hash === "#tab" + item.Id && item.name === 'tabName1'"
        />

        <!-- no "pre-loading" -->
        <TabContent2
            :v-if="$route.hash === "#tab" + item.Id && item.name === 'tabName2'"
        />

        <!-- loaded immediately -->
        <TabContentDefault v-else />
    </div>
</template>

This is simplified code, of course. In reality I use functions for the checks and way more properties.

0👍

I see two options here:

First, you can use b-tab and implement routing for them, using query params may help you. you need to use @change every time one tab changes.

Second, you can implement a component for showing your output:

<MyCustomComponent v-for="(item, index) in myItems" :key="item.id" :is="selected_component_name " />

check the vue documentation for more explanation.

Leave a comment