lightbox basics template inside lightbox.vue

lightbox.vue

<template>
  <div>
    <img
      @click="lightboxEffect(index)"
      v-for="(thumbnail, index) in thumbnails"
      :key="thumbnail"
      :src="thumbnailsPath + thumbnail"
      class="light-box__thumbnail"
    >

      <div @click.stop="bg = !bg" class="light-box__bg" v-if="bg"></div>

    <div v-if="bg" class="light-box__container">
  
      <div @click="prev" class="light-box__prev light-box__btn"></div>
        <div :key="currentImage">
          <img :src="largePath + [currentImage + 1] +'.jpg'" class="light-box__container__img">
        </div>

      <div @click="next" class="light-box__next light-box__btn"></div>
  
    </div>
  </div>
</template>