如何在循环中触发指定行的b-overlay组件

你当前的问题根源在于用了一个全局的showOverlay变量，所有行的B-Overlay都绑定同一个状态，所以修改时所有弹窗会同时显示。要实现每行单独触发，需要给每个子订单维护独立的显示状态，具体实现如下：

核心思路 #

用一个对象存储每个子订单ID对应的overlay显示状态，点击按钮时仅修改对应ID的状态值。

修改后的完整代码 #

<template>
  <b-row
    v-for="(subOrder, index) in subOrders"
    :key="subOrder.subOrderId"
  >
    <!-- 绑定当前子订单ID对应的显示状态，默认不显示 -->
    <b-overlay :show="showOverlays[subOrder.subOrderId] || false" rounded="sm">
      <b-col md="6">
        {{ subOrder.orderNumber }}
        <b-button
          size="lg"
          variant="primary"
          @click="onSubmit(subOrder.subOrderId)"
        >
          Submit
        </b-button>
      </b-col>
    </b-overlay>
  </b-row>
</template>
<script>
import { BRow, BCol, BButton, BOverlay } from 'bootstrap-vue'
export default {
  components: {
    BRow, BCol, BButton, BOverlay,
  },
  data() {
    return {
      // 用对象存储每个子订单的overlay状态
      showOverlays: {}
    }
  },
  methods: {
    onSubmit(id) {
      // 仅触发当前点击的子订单对应的overlay
      this.$set(this.showOverlays, id, true);
      
      // 可选：模拟异步操作（比如接口请求）完成后关闭overlay
      // setTimeout(() => {
      //   this.$set(this.showOverlays, id, false);
      // }, 2000);
    }
  },
}
</script>

关键说明 #

• 使用$set是因为Vue无法自动检测对象新增属性的变化，通过$set可以确保状态变更被Vue响应式追踪，从而正确更新视图。
• 若需要关闭指定行的overlay，只需将showOverlays中对应ID的值设为false即可。

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