Vue3循环内模态框显示错误图片问题求助

问题根源 #

1. 循环内重复渲染多个模态框组件，且共用同一个revele状态，触发时所有模态框都会显示，最后一个会覆盖前面的实例，导致看起来始终显示最后一张图。
2. 图片URL传递语法错误，且未记录当前点击的图片地址。
3. 图片标签的src属性未正确绑定数据。

具体修复方案 #

1. 重构Home.vue组件逻辑

• 移除循环内的模态框组件，只在外部保留一个实例，避免重复渲染。
• 添加currentImageUrl变量存储当前要展示的图片地址。
• 修改点击事件，先赋值当前图片URL再切换模态框状态。
• 修正列表中图片的src绑定。

修改后的Home.vue代码：

<template>
  <div class="container">
    <div class="commentaires" v-for="(com, index) of coms" :key="index">
      <img class="photo" :src="com.imageUrl" alt="image du commentaire" @click="openModal(com.imageUrl)">
    </div>
    <!-- 只保留一个模态框组件 -->
    <modale :imageUrl="currentImageUrl" :revele="revele" :toggleModale="toggleModale"></modale>
  </div>
</template>

<script>
import axios from "axios";
import Modale from "./Modale";

export default {
  name: 'HoMe',
  data() {
    return {
      coms: [],
      revele: false,
      currentImageUrl: '' // 新增变量存储当前图片地址
    }
  },
  components: {
    modale: Modale
  },
  methods: {
    toggleModale: function () {
      this.revele = !this.revele;
    },
    // 新增打开模态框的方法
    openModal(imageUrl) {
      this.currentImageUrl = imageUrl;
      this.revele = true;
    },
    // 补充GET请求获取数据的方法（原代码缺失部分）
    async fetchComs() {
      try {
        const res = await axios.get('你的接口地址');
        this.coms = res.data;
      } catch (err) {
        console.error('获取数据失败:', err);
      }
    }
  },
  mounted() {
    this.fetchComs(); // 组件挂载时调用接口获取数据
  }
};
</script>

2. 修正Modale.vue组件的图片绑定

将模态框内的图片src绑定到传入的imageUrl props：

修改后的Modale.vue代码：

<template>
  <div class="bloc-modale" v-if="revele">
    <div class="overlay" @click="toggleModale"></div>
    <div class="modale card">
      <div @click="toggleModale" class="btn-modale btn btn-danger">X</div>     
      <img :src="imageUrl" alt="image du commentaire" id="modal">
    </div>
  </div>
</template>
<script>
export default {
  name: "Modale",
  props: ["revele", "toggleModale", "imageUrl"],
};
</script>

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