带有“v-for”的 b-tab 中的条件属性“lazy”

Posted 2023-02-22

【中文标题】带有“v-for”的 b-tab 中的条件属性“lazy”

【英文标题】：Conditional prop 'lazy ' in b-tab with 'v-for'

【发布时间】：2021-07-03 00:15:18

【问题描述】：

我正在使用 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 的方法吗？

【参考方案1】：

lazy 是一个 prop 而不是一个指令，它接受一个布尔值，该值可以基于当前元素绑定一个条件，例如：

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

或类似的东西：

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

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