Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Learn how to use the Vue version of Fullscreen Lightbox.

Updating props

The lightbox is not reactive to props changes other than "toggler" and slide control props. The lightbox component has to be remounted to update them. In most cases the best solution is to use the Vue's "key" prop—after updating this prop, Vue remounts the component.
In the following example it is presented how the "sources" prop can be updated:

<template>
<div>
<button @click="toggler = !toggler">
Open the lightbox.
</button>

<button @click="productIndex = 1">
Load the second product.
</button>

<FsLightbox
:toggler="toggler"
:sources="productsImages[productIndex]"
:key="productIndex"
/>
</div>
</template>

<script>
import FsLightbox from "fslightbox-vue";

export default {
components: { FsLightbox },
props: {
productsImages: Array
},
data() {
return {
toggler: false,
productIndex: 0
}
}
}
</script>
Look over the Fullscreen Lightbox open source plug-ins.