BootstrapVue中b-tab结合v-for实现lazy属性条件绑定的方法

BootstrapVue 的 b-tab 组件的 lazy 属性属于布尔存在性属性，组件内部的判定逻辑是：只要当前组件的 props 对象上存在 lazy 这个键，无论传入的是true还是false，都会识别为开启懒加载。这也就是直接绑定:lazy="true/false"失效的核心原因——哪怕传值为false，props 对象上依然存在这个键，会被错误判定为需要懒加载。

利用 Vue 的属性传值规则：当动态绑定的属性值为 undefined 时，Vue 会直接跳过向目标组件传递该prop，等价于在模板中完全不写这个属性。
基于这个规则，只需要调整lazy属性的绑定逻辑，根据每个元素的配置动态决定是否传递这个prop即可，完全不需要拆分原有的遍历逻辑。

模板代码 #

先给elements数组中的每个Tab元素新增一个标记字段（比如enableLazy），用来标记该Tab是否需要开启懒加载，再按如下方式编写模板：

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

效果说明 #

• 当element.enableLazy为真值时，动态绑定会向b-tab传递lazy: true的prop，正常触发懒加载逻辑
• 当element.enableLazy为假值时，表达式最终结果为undefined，Vue 会跳过传递lazy属性，和模板中完全不写lazy的效果完全一致，不会开启懒加载

关键注意点 #

不要直接简写为:lazy="element.enableLazy"——这种写法在值为false时依然会向组件传递存在的lazy: false属性，会触发组件内部的存在性判定，导致懒加载意外开启，必须通过|| undefined把假值场景的属性值设置为undefined，让Vue真正跳过该属性的传值。

内容的提问来源于stack exchange，提问作者jasie