Vue3生成多内容独立卡片失败：内容重复未形成独立卡片

问题原因 #

你当前的错误在于将v-for指令分别用在了卡片内部的图片、标签、标题等单个元素上，这会导致每个元素都遍历projectList数组，最终在同一个卡片里重复显示所有项目的内容，而不是为每个项目生成独立的卡片容器。

修正后的代码 #

模板部分 #

<div>
  <!-- 将v-for移到整个卡片容器上，为每个项目生成独立卡片 -->
  <div class="col-md-4" v-for="project in projectList" :key="project.name">
    <div class="card card--project">
      <img class="card__img" :src="project.img" alt="Project Image" />
      <div class="card__text">
        <p class="project-label text-md text-md--md">{{ project.tag }}</p>
        <h4 class="text-gradient-primary">{{ project.name }}</h4>
        <p class="project-desc text-md">{{ project.desc }}</p>
        <a href="#" class="links">Read More</a>
      </div>
    </div>
  </div>
</div>

关键改动说明 #

• 将v-for="project in projectList"从卡片内部的单个元素上移除，绑定到最外层的.col-md-4容器上，这样数组中的每个项目都会生成一个完整的卡片结构（包括.col-md-4、.card及内部所有元素）。
• 卡片内部的所有属性（project.img、project.tag等）直接引用当前循环的project对象，无需再单独添加v-for。
• 关于:key：当前用project.name可以（因为两个项目名称不同），如果后续有重复名称的风险，建议给每个project对象添加唯一的id字段（比如id: 1、id: 2），然后用:key="project.id"，避免Vue列表渲染的潜在警告。

额外优化建议 #

• 图片路径规范：在Vue项目中，静态资源建议使用@别名（默认指向src目录），可以把./src/assets/img/Pp.png改成@/assets/img/Pp.png，路径更规范且不易出错。
• 冗余代码清理：你定义了project props但并未使用，如果不需要可以直接删除，避免代码冗余。

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