pexea12 / vue-image-lightbox

A Vue component to display an image gallery lightbox
347 stars 80 forks source link

thumb on dynamic image don't change #59

Closed cogno98 closed 5 years ago

cogno98 commented 5 years ago

I have this template and second thumbs don't change on images change. The images change correctly but thumbs not work properly.

<template>
  <div>
        <div 
          v-for="(image, index) in products" 
          style="display: inline-block"
          :key="index"
        >
          <img 
            v-lazy="image.link" 
            style="height: 100px" 
            @click="openGallery(index)"
          >
        </div>
      <LightBox 
        :images="images" 
        ref="lightbox"
        :show-thumbs="true"
        :show-light-box="false"
      >
      </LightBox>
    </div>

</template>

<script>
require('vue-image-lightbox/dist/vue-image-lightbox.min.css')
import LightBox from 'vue-image-lightbox'

export default {
  components: {
    LightBox,
  },
  created() {
    console.log('ene0')
  },
  data() {
    return {
      products: [
        { id: 1, link: '/image/1.jpg', images: [
            { id: 1, link: '/image/7.jpg'},
            { id: 2, link: '/image/2.jpg'},
            { id: 3, link: '/image/3.jpg'}
        ]},
        { id: 2, link: '/image/6.jpg', images: [
            { id: 4, link: '/image/4.jpg'},
            { id: 5, link: '/image/5.jpg'},
            { id: 6, link: '/image/6.jpg'}
        ]}
      ],
      images: []
    }
  },
   methods: {
    openGallery(index) {
      this.images = []
      for (let i = 0; i < this.products[index].images.length; i++){
        this.images.push({
          src: this.products[index].images[i].link,
          thumb: this.products[index].images[i].link
        })
      }
      console.log(this.images)
      this.$refs.lightbox.showImage(0)
    }
  }
}
</script>
pexea12 commented 5 years ago

This error is now fixed in version 6.1.2

https://github.com/pexea12/vue-image-lightbox/releases/tag/6.1.2