Lightgallery может быть открыта только один раз (VueJs)

Question

У меня такая проблема, что lightgallery может быть открыта только один раз. Каждый следующий щелчок по кнопке не отвечает. Я использую lightgallery в качестве компонента.

В моем родительском компоненте у меня есть две кнопки для открытия галереи изображений или видео

ParentComponent.vue

<template>
  <div>
    <button class="btn-secondary" @click="showGallery('IMAGE')">
        {{ $t('showImages') }}
    </button>
    <button class="btn-secondary" @click="showGallery('VIDEO')">
        {{ $t('playVideo') }}
    </button>
    <LightGallery
       v-if="galleryVisible" :gallery-items="galleryItems"
       :gallery-type="galleryType" :user-subscription="userSubscription">
    </LightGallery>
  </div>
<template>

<script>
import LightGallery from "./subComponents/LightGallery.vue";

    export default {
        name: "Location",
        components: {
            LightGallery: LightGallery,
        },
        data() {
            return {
                // image / video slide show data
                locationImages: [],
                locationVideo: [],
                galleryItems: {},
                galleryVisible: false,
                galleryType: 'IMAGE',
            };
        },
        methods: {
            showGallery(type) {
                this.galleryItems = {};
                this.galleryVisible = true;
                this.galleryType = type;
                if (type === 'IMAGE') {
                    this.galleryItems = this.locationImages;
                } else if (type === 'VIDEO') {
                    this.galleryItems = this.locationVideo
                }
            },
            hideGallery() {
                this.galleryItems = {};
                this.galleryVisible = false;
            },
    };
</script>

А это мой дочерний (lightgallery) компонент

<template>
    <div id="lightgallery">
    </div>
</template>

<script>

    // Light gallery
    import 'lightgallery.js'
    import 'lightgallery.js/dist/css/lightgallery.css'
    import 'lg-zoom.js'
    import 'lg-autoplay.js'
    import 'lg-fullscreen.js'
    import 'lg-hash.js'
    import 'lg-pager.js'
    import 'lg-share.js'
    import 'lg-thumbnail.js'
    import 'lg-video.js'
    // Light gallery

    export default {
        name: "LightGallery",
        props: {
            galleryItems: {
                type: Array,
                required: true
            },
            galleryType: {
                type: String,
                required: true
            },
            userSubscription: {
                type: Object,
                required: false,
                default: {
                    active: false
                }
            }
        },
        methods: {
            openGallery() {
                // prepare images / video to display them in lightGallery
                let dynamicElements = [];
                if (this.galleryType === 'IMAGE') {
                    this.galleryItems.forEach(function (value) {
                        dynamicElements.push({
                            src: '/' + value.hd_path,
                            thumb: '/' + value.thumb_path,
                        });
                    });

                }
                if (this.galleryType === 'VIDEO') {
                    this.galleryItems.forEach(function (value) {
                        dynamicElements.push({
                            src: 'https://vimeo.com/' + value.vimeo_id,
                        });
                    });
                }

                let lg = document.getElementById('lightgallery');
                window.lightGallery(lg, {
                    mode: 'lg-slide',
                    download: false,
                    thumbnail: true,
                    dynamic: true,
                    dynamicEl: dynamicElements,
                    autoplayFirstVideo: true,
                    loadVimeoThumbnail: false,
                });

                lg.addEventListener('onCloseAfter', function (event, index, fromTouch, fromThumb) {
                    lg.data('lightGallery').destroy(true);
                }, false);

                window.lightGallery(lg);
            },
        },
        mounted() {
            this.openGallery();
        }
    };
</script>

Проблема! При первой перезагрузке страницы, если я нажимаю кнопку «Показать изображение» или «Показать видео», открывается галерея, и она работает хорошо. Когда я закрываю галерею, я вижу ошибку в инструментах разработчика (возможно, совершенно не связанную с моей проблемой)

Каждый следующий щелчок по кнопке Показать изображение или показать видео ничего не делает. Так как я могу правильно уничтожить Lightgallery, чтобы я мог открыть ее снова? Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, и я предоставлю. Спасибо!

Answer 1

Попробуйте добавить эту строку в метод showGallery.

        showGallery(type) {

            this.galleryVisible = false // <<--- this line

            this.galleryItems = {};
            this.galleryVisible = true;
            this.galleryType = type;
            if (type === 'IMAGE') {
                this.galleryItems = this.locationImages;
            } else if (type === 'VIDEO') {
                this.galleryItems = this.locationVideo
            }
        },

Light Gallery работает только один раз. Но приведенная выше строка кода воссоздаст компонент Light Gallery, и вы будете иметь новый экземпляр компонента Light Gallery (именно то, что у вас есть при загрузке страницы) каждый раз, когда вы нажимаете на одну из кнопки, которые запускают Light Gallery.