Not sure how to use lightbox in my vue project?

Question

I'm currently trying to use lightbox in my project! And as you notice I using a (v-for) for the items array.

How to integrated lightbox with v-for items?

vue-image-lightbox A simple image lightbox component for Vuejs https://www.npmjs.com/package/vue-image-lightbox

<div class="items" v-scroll-reveal.reset>

   <md-card

      v-for="(product,index) in products"

      :key="index"

      v-show="product.type === activeProduct">

      <md-card-media md-ratio="16:9">

        <img :src="require(`../assets/img/products/${product.img}`)"/>

      </md-card-media>

   </md-card>

</div>

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

Replace the img with <LightBox :images="images"></LightBox>. As per the examples in the npm page, the images variable is an object that holds multiple resolutions of the picture.

The elements should be rendered automatically afterwards.