search

RobinCK / vue-gallery

:camera: Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. 🇺🇦
https://robinck.github.io/vue-gallery/
MIT License
470 stars 85 forks source link

issue when i looping image galley under array data #132

Open ahsandev2019 opened 3 years ago

ahsandev2019 commented 3 years ago

i have data like this datagaleri: [ { judul: 'example title', tanggal: '20-12-2020', lokasi: 'example address', images: [ 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', ], }, { judul: 'example title', tanggal: '20-12-2020', lokasi: 'example address', images: [ 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', ], }, { judul: 'example title', tanggal: '20-12-2020', lokasi: 'example address', images: [ 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', ], }, { judul: 'example title', tanggal: '20-12-2020', lokasi: 'example address', images: [ 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', 'https://dummyimage.com/800/ffffff/000000', 'https://dummyimage.com/1600/ffffff/000000', 'https://dummyimage.com/1280/000000/ffffff', 'https://dummyimage.com/400/000000/ffffff', ], }, ],

when i looping like this 

 <div v-for="(item, i) in datagaleri" :key="i">
        <div
          style="margin-top:5px; border-bottom: 1px solid #E9E9E9;padding-bottom: 25px;margin-bottom:15px;"
        >
          <div class="col-xs-12 col-md-4">
            <div class="desc-wrap" style="margin-top:15px;">
              <h4 style="color: #0071BC;font-size: 18px;font-weight: 700; margin-bottom:5px;">
                {{ item.judul }}
              </h4>
              <div class="date">
                <i class="fa fa-calendar" style="margin-bottom:5px;"></i> {{ item.tanggal }}
              </div>
              <div class="date">
                <i class="fa fa-map-marker" style="margin-bottom:15px;"></i> {{ item.lokasi }}
              </div>

              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore
              </p>
            </div>
          </div>
          <div class="col-xs-12 col-md-8">
            <gallery :images="images" :index="index" @close="index = null"></gallery>
            <div
              class="image"
              v-for="(image, imageIndex) in item.images"
              :key="imageIndex"
              @click="index = imageIndex"
              :style="{ backgroundImage: 'url(' + image + ')', width: '100px', height: '100px' }"
            ></div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>

i got error, how to looping image array data on array data ?