Использование карусели изображения в vuetify 1-е изображение не видно при открытии - PullRequest
Новая
       22

Использование карусели изображения в vuetify 1-е изображение не видно при открытии

0 голосов
/ 07 сентября 2018

В моем Laravel 5.6 / "vue": "^ 2.5.7 /" vuetify ":« ^ 1.0.8 »я использую карусель изображения (https://vuetifyjs.com/en/components/carousels#introduction)

В основном работает нормально, но есть проблема, что при открытии первого изображения не видно: Я показываю / скрываю этот блок изображений, вызывая метод showArtistImages и меняя show_artist_images var на true, и выгрузка данных в виде this.artistImagesList: 

    <v-card-actions v-show="artist.related_images_count > 0">
        <v-chip color="teal" text-color="white">
            <v-icon color="white">{{ image_icon }}</v-icon>
            {{  $tc('artist.has_images', artist.related_images_count, {related_images_count: artist.related_images_count}) }}
        </v-chip>
        <v-spacer></v-spacer>
        <v-btn icon @click.native="showArtistImages()">
            <v-icon>{{ show_artist_images ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
        </v-btn>
    </v-card-actions>

    <v-slide-y-transition>
        <v-card-text v-show="show_artist_images">
            <v-progress-circular indeterminate :size="40" color="amber" v-show="show_artist_images_progress_circular"
                                 class="pt-1"></v-progress-circular>
            <v-carousel>
                <v-carousel-item v-for="(nextArtistImage,i) in artistImagesList" :key="nextArtistImage.id">
                    <img :src="nextArtistImage.image_url" style="height:440px;width:auto;" :alt="nextArtistImage.image_url"/>
                    <div class="carousel_image_title">{{ nl2br(concatStr(nextArtistImage.description, 100)) }}</div>
                </v-carousel-item>
            </v-carousel>

        </v-card-text>
    </v-slide-y-transition>


    showArtistImages() {
        this.show_artist_images = !this.show_artist_images;
        if (!this.show_artist_images) return;
        this.show_artist_images_progress_circular = true;
        axios.post(this.api_version_link + 'artist_page_show', {'artist_slug': this.artist_slug, 'type': ['images'], 'locale': this.current_locale }).then((response) => {
            this.artistImagesList = response.data.artistImagesList;

В результате блок с каруселью открывается, но область изображений пуста, и только через 2-3 секунды изображение открывается, и я вижу, что оно второе изображение. 1-е изображение сначала не показывалось. Но если сделать 1-й круг, остальные изображения показываются по очереди. Можете ли вы дать мне подсказку, почему и как это исправить?

Спасибо!

...