在 vue 3 的 `v-for` 列表中，若需为每个元素独立控制类名（如点击单张图片高亮），不可共用单一布尔状态，而应使用与列表等长的状态数组，并通过索引精准更新对应项。

在 Vue 3（尤其是选项式 API）中，当对 v-for 渲染的多个元素使用同一个响应式变量（如 active: false）控制 :class 时，所有元素会同步响应——点击任一项都会触发全局切换，违背“仅激活当前项”的交互预期。根本原因在于：共享状态无法表达个体差异。

解决思路是将“是否激活”这一状态从全局变量升级为按索引隔离的局部状态。推荐做法是维护一个与 images 数组长度一致的布尔数组 activeState，每个下标对应一张图片的激活状态。

以下是完整、可直接运行的优化实现：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

<script>
export default {
  props: {
    images: {
      type: Array,
      required: true,
      default: () => []
    }
  },

  data() {
    return {
      // 初始化与 images 等长的布尔数组，全部默认为 false
      activeState: new Array(this.images.length).fill(false)
    }
  },

  methods: {
    // 根据索引切换指定项的激活状态
    toggleState(index) {
      this.activeState[index] = !this.activeState[index]
    }
  }
}
</script>

<template>
  <section class="flex gap-32 py-32 flex-row items-center relative">
    <div class="grid basis-2/3 gap-x-16 gap-y-20" data-grid>
      <figure 
        v-for="(image, index) in images" 
        :key="index" 
        class="cursor-zoom-in"
      >
        <img 
          :src="image" 
          :class="{ 'itsActive': activeState[index] }" 
          @click="toggleState(index)"
          alt="Gallery item"
        />
      </figure>
    </div>
  </section>
</template>

<style scoped>
.itsActive {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
  border-radius: 4px;
}
</style>

✅ 关键要点说明：

立即学习“前端免费学习笔记（深入）”；

• activeState 使用 new Array(n).fill(false) 初始化，确保每个图片拥有独立的响应式状态位；
• @click="toggleState(index)" 将事件绑定到具体索引，避免副作用扩散；
• :class="{ 'itsActive': activeState[index] }" 实现精准类名绑定，语义清晰且性能友好；
• 若后续需支持多选或取消其他项（单选模式），可在 toggleState 中扩展逻辑，例如先重置全部再设当前项为 true；
• 注意：若 images 是响应式 prop 且可能动态变更长度，建议在 watch 中同步调整 activeState 长度（但多数场景下图片列表静态，此步可省略）。

该方案符合 Vue 响应式设计原则，结构清晰、易于维护，是处理列表项独立状态的经典范式。