如何将这个值绑定到 vue 上的动态图像中的 src 属性

Question

我是 vue 的新手，我正在学习，所以我的代码可以非常简单，我想制作一种灯箱，我的问题是我不知道如何将 imgSrc 属性链接到图像效果激活时点击 lightbox

模板：

<div class="container">
  <div class="image-container">
    <div class="image" v-for="(imagenes, index) in imgBanos" :key="index">
      <img :src="imagenes.img" :id="imagenes.id" @click="change">
    </div>
  </div>
  <div class="popup-imag" v-show="show">
    <span @click="reverse">&times;</span>
    <img :src="imgSrc">
  </div>
</div>

JS:

export default {
  data() {
    return {
      show: false,
      imgSrc: "",
      imgBanos: [{
          id: 2,
          img: require("../assets/si/2.jpeg")
        },
        {
          id: 3,
          img: require("../assets/si/3.png")
        },
        ...
      ],

    }
  },
  methods: {
    change() {
      this.show = true
    },
    reverse() {
      this.show = false
    }
  }
}

我想将 imgSrc 元素与来自 imgBanos.img 源的点击图像链接

我试过给每个图片一个索引，但我不知道vue是如何识别点击选中的图片

Answer 1

只需更新您的

change()

方法，以便您可以传入

src

（或您需要的任何数据）：

<div v-for="(image, index) in imgBanos" :key="index">
  <img :src="image.img" @click="showImageInPopup(image)">
</div>

然后你可以在你的回调中使用它：

showImageInPopup(image) {
  this.imgSrc = image.src
  this.show = true         
}