b-tab 中的条件属性 'lazy ' with 'v-for'

Question

我正在使用 BootstrapVue 的 b-tabs 和 lazy 道具作为 documented。我有以下问题：
我需要在使用 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>

我不想像这样拆分 v-for:

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

因为 lazy="false" / lazy="true" 不幸的是不是一个可行的选择：是否有另一种不需要拆分 v-for 的方法？

Answer 1

lazy 是一个 prop 而不是一个指令，它接受一个布尔值，可以根据当前元素绑定一个条件，比如 :

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

或类似的东西：

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

当你想对一个道具使用布尔值时，你应该使用 : 绑定它，比如 :lazy="false"

b-tab 中的条件属性 'lazy ' with 'v-for'

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

tabs

lazy-loading

typescript

vue.js

bootstrap-vue