Vue中v-for循环项模态框批量显示问题求解

这个问题很典型——你现在所有的列表项都共用了同一个itemModal布尔值状态，所以只要把它设为true，所有绑定了v-show="itemModal"的模态框都会同时显示出来。咱们有两种简单的方案来修复这个问题：

方案一：给每个列表项单独维护模态框状态 #

我们可以用一个对象（或数组）来存储每个列表项的模态框显示状态，这样每个项的状态都是独立的：

修改后的代码： #

<template>
  <div v-for="(item, index) in items" :key="index" > 
    <div> {{ item.name }} 
      <div> 
        <span @click="modalStates[index] = true"> ? </span> 
        <div v-show="modalStates[index]"> 
          {{ item.description }} 
          <button @click="modalStates[index] = false"> Close modal </button> 
        </div> 
      </div> 
    </div> 
  </div>
</template>

<script>
export default { 
  data() { 
    return { 
      // 用对象存储每个项的模态框状态，初始为空，点击时自动添加对应索引的状态
      modalStates: {}
    } 
  } 
}
</script>

如果你的item对象本身有唯一标识（比如id），更推荐用item.id作为modalStates的key，避免因列表顺序变化导致的索引错乱：

<span @click="modalStates[item.id] = true"> ? </span> 
<div v-show="modalStates[item.id]"> 
  {{ item.description }} 
  <button @click="modalStates[item.id] = false"> Close modal </button> 
</div>

方案二：跟踪当前激活的模态框项 #

另一种更简洁的思路是，只维护一个“当前显示模态框的项标识”，通过判断当前项是否为激活项来控制显示：

修改后的代码： #

<template>
  <div v-for="item in items" :key="item.id" > 
    <div> {{ item.name }} 
      <div> 
        <span @click="activeModalId = item.id"> ? </span> 
        <div v-show="activeModalId === item.id"> 
          {{ item.description }} 
          <button @click="activeModalId = null"> Close modal </button> 
        </div> 
      </div> 
    </div> 
  </div>
</template>

<script>
export default { 
  data() { 
    return { 
      // 初始为null，表示没有激活的模态框
      activeModalId: null
    } 
  } 
}
</script>

这种方式的优势是不需要维护多个状态变量，尤其适合列表项较多的场景，逻辑更清晰。

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