Vue Gallery Multiple Bug

https://github.com/RobinCK/vue-gallery/issues/104

by von

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery-fullscreen.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-helper.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/blueimp-gallery.min.css">
<script src="https://unpkg.com/vue-gallery"></script>
<div id="app">
  <gallery v-for="(images, i) in allImages" :id="`gallery-${i}`" :key="`gallery-${i}`" :images="images.imgsArr" :index="images.index" @close="index = null"></gallery>
  <div v-for="(images, i) in allImages" :key="`images-${i}`">
    <div class="image" v-for="(image, imageIndex) in images.imgsArr" :key="`${i}-${imageIndex}`" @click="images.index = imageIndex" :style="{
					backgroundImage: 'url(' + image + ')',
					width: '300px',
					height: '200px'
				}"></div>
  </div>
</div>

CSS

.image {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #ebebeb;
  margin: 5px 5px 48px 5px;
}

JavaScript

new Vue({
  el: '#app',
  data: function() {
    return {
      allImages: {
        1: {
          imgsArr: [
            'https://dummyimage.com/1500/575757/ffffff&text=gallery-1+1',
            'https://dummyimage.com/1500/575757/ffffff&text=gallery-1+2'
          ],
          index: null
        },
        2: {
          imgsArr: [
            'https://dummyimage.com/1500/608566/ffffff&text=gallery-2+1',
            'https://dummyimage.com/1500/608566/ffffff&text=gallery-2+2'
          ],
          index: null
        }
      }
    }
  },

  components: {
    'gallery': VueGallery
  }
});