我怎么能把这个值绑定到vue上动态图像的src属性

zzwlnbp8  于 2023-03-31  发布在  Vue.js
关注(0)|答案(1)|浏览(174)

我是vue的新手,我正在学习,所以我的代码可以非常简单,我想做一个lightbox,我的问题是,我不知道如何将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>

联森:

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如何识别通过单击选中的图像

rekjcdws

rekjcdws1#

只要更新你的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         
}

相关问题