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>