CODEWITHSUNDEEP
typescriptvue.jstabslazy-loadingbootstrap-vue
jasie
jasie

Reputation: 2444

Conditional prop 'lazy ' in b-tab with 'v-for'

I am using BootstrapVue's b-tabs with the lazy prop as documented. I have the following problem:
I need to load SOME of the tabs lazy, and others NOT while using v-for.

<template>
    <b-tabs>
        <b-tab lazy v-for="element in elements" :key="element.id" :title="element.title">
            <div>[lots of stuff here]</div>
        </b-tab>
    </b-tabs>
</template>

I do not want to do split up the v-for like this:

<template>
    <b-tabs>
        <b-tab v-for="element in elementsNonLazy" :key="element.id" :title="element.title">
            <new-component />
        </b-tab>

        <b-tab lazy v-for="element in elementsLazy" :key="element.id" :title="element.title">
            <new-component />
        </b-tab>
    </b-tabs>
</template>

As lazy="false" / lazy="true" is unfortunately not a working option: is there another way which does not require to split up the v-for?

Upvotes: 1

Views: 729

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

lazy is a prop not a directive that accepts a boolean value that could be bound a condition based on the current element like :

 <b-tab v-for="element in elements" :lazy="element.isLazy"  >

or something like :

<b-tab v-for="element in elements" :lazy="element.id>5"  >

when you want to use a boolean value to a prop you should bind it using : like :lazy="false"

Upvotes: 1

Related Questions