Vue循环中如何为每个子组件设置独立状态变量触发对应模态框

问题原因 #

所有循环生成的strategies-modal组件共用同一个布尔类型的状态变量，只要变量值为真，所有绑定该变量的模态框都会同步触发显示。

解决方案 #

方案1：存储激活项标识（改动最小，适合大多数场景） #

不用布尔值控制显隐，改用状态存储当前需要激活的模态框的唯一标识：

1. 修改状态定义

// 原data中的 modalStrategies: false 替换为以下定义
data() {
  return {
    // 存储当前打开的模态框对应的索引/唯一ID，初始为null
    activeModalIndex: null,
    // 其余原有状态保持不变
  }
}

2. 修改模板绑定逻辑

<div class="featured-card-container">
  <swiper class="swiper" :options="swiperOption">
    <template v-for="(strategy, index) in strategiesCards">
      <swiper-slide :key="'slider-' + index">
        <strategy-card
          :data="strategy"
          @click.native="activeModalIndex = index"
        />
      </swiper-slide>
      <strategies-modal
        :key="'modal-' + index"
        :dialog="activeModalIndex === index"
        @update:dialog="isOpen => !isOpen && (activeModalIndex = null)"
        :data="strategy"
      />
    </template>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>

优化建议：如果strategy有唯一ID字段，优先用ID代替index作为判断标识，避免列表增删、排序时出现索引错乱的问题。

方案2：抽离子组件隔离状态（适合列表逻辑复杂的场景） #

将单个轮播项、卡片、模态框整体抽为独立子组件，每个子组件内部单独维护modalVisible布尔状态，状态完全隔离不会出现互相干扰的问题。

内容的提问来源于stack exchange，提问作者Richie P.