CoolLightBox 多个画廊 vue.js答案

【问题标题】：CoolLightBox multiple galeries vue.jsCoolLightBox 多个画廊 vue.js
【发布时间】：2021-02-16 21:12:49
【问题描述】：

我想使用 CoolLightBox 设置具有多个画廊的页面，当我有一个画廊时它对我有用，但是当我想创建多个时……对于页面单个画廊上的每个图像……它只显示我在灯箱里放一张图片

这是我的代码：

<div class="m-3" v-for="(item, imageIndex) in info" :key="item.id">
    <div class="row mt-3">
      
      <div id="burza" class="col-lg-3 my-auto text-center">

        <CoolLightBox
          :items="['localhost:4000/api/uploads/' + item.image]"
          :index="index"
          @close="index = null">
        </CoolLightBox>


        {{imageIndex}} // here is index of every image on page but it still didnt work...
        <div class="text-center">
          <img
              class="img-thumbnail"
              :key="imageIndex"
              @click="index = imageIndex"
              :src= "'localhost:4000/api/uploads/' + item.image">
        </div>
        <a :href="'localhost:4000/api/uploads/' + item.image"><img class="img-fluid" :src="'localhost:4000/api/uploads/' + item.image"></a>
      </div>
    </div>

如何创建多个 CoolLightBox 画廊？我认为我的问题在于 imageIndex 但我不知道如何改进它...

【问题讨论】：

标签： javascript vue.js lightbox

【解决方案1】：

您可以通过在点击事件期间更新图像数组来做到这一点。所以你实际上在 for each 循环之外有 CoolLightBox，如下所示：

<div>
    <CoolLightBox
      :items="images"
      :index="index"
      @close="index = null">
    </CoolLightBox>

    <div>
      <div class="collections-container"
            v-for="(collection, collectionIndex) in collections"
            @click="images=collection.images, index = 0"
            :key="collectionIndex">

          <div
            :style="{ 'background': 'url(' + collection.cover + ') no-repeat center', 'background-size': 'cover' }"
          ></div>

      </div>
    </div>
</div>

<script>
export default {
    data() {
      return {
        index: null,
        images: this.collections[0].images
      }
    }
}
</script>

因此，您在这里所做的是将灯箱保持在 for 循环之外，如果您看到脚本部分，则 images 变量最初默认设置了第一个集合的图像。

在 for 循环中，我使用封面图像呈现集合，单击时，我将图像变量设置为单击集合的图像集，然后将索引设置为 0（因为我总是希望集合打开与第一项）。希望这可以帮助。您可以在 this link 看到这一点。

【讨论】：