Vue3中如何根据条件激活b-tab组件？

你当前的问题主要出在两处：模板绑定里多余的this，以及没有用b-tabs的标准方式控制激活标签。下面是具体修正方案：

问题根源 #

• Vue模板的属性绑定中，无需加this，直接用变量名即可。你写的:active="this.blockClicked === 'limitations'"里的this会导致判断逻辑失效，因为模板内默认直接访问实例属性。
• b-tabs组件更适合用v-model统一控制当前激活标签，而非给每个b-tab单独设置:active，这样既避免逻辑混乱，也能保证同一时间只有一个标签页激活。

修正步骤 #

1. 保留现有数据与方法 #

你的数据定义和点击方法逻辑没问题，继续使用即可：

data() {
  return {
    blockClicked: ''
  }
},
methods: {
  openTab(block) {
    this.blockClicked = block.target.id;
    console.log(this.blockClicked);
  }
}

2. 重构b-tabs组件写法 #

给b-tabs添加v-model绑定到blockClicked，同时给每个b-tab设置value属性，值对应SVG区域的id：

<b-tabs pills card v-model="blockClicked">
  <b-tab value="limitations">
    <template #title>
      Limits
    </template>
    <!-- 这里放"Limits"标签页的内容 -->
  </b-tab>

  <!-- 示例：添加另一个标签页，对应SVG中id为"settings"的区域 -->
  <b-tab value="settings">
    <template #title>
      Settings
    </template>
    <!-- 这里放"Settings"标签页的内容 -->
  </b-tab>
</b-tabs>

3. 确保SVG区域的点击绑定 #

每个需要触发标签切换的SVG元素，都绑定openTab方法，比如你原来的红色矩形：

<rect
  @click="openTab"
  style="fill:#ff0000;stroke-width:0.264583"
  id="limitations"
  width="34.705162"
  height="32.925407"
  x="17.797518"
  y="49.83305" />

其他SVG区域只需修改id并绑定@click="openTab"，就能对应到不同标签页。

补充说明 #

原来用:active的方式之所以失败，是因为模板内的this会被解析为普通字符串，导致判断条件this.blockClicked === 'limitations'实际等价于undefined === 'limitations'，永远为假。而用v-model绑定b-tabs，是组件设计的标准用法，逻辑更清晰也更可靠。

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