VueJs компонент не рендерится внутри модального, пока я не заставлю рендеринг изменить размер окна - PullRequest
Новая
       51

VueJs компонент не рендерится внутри модального, пока я не заставлю рендеринг изменить размер окна

0 голосов
/ 22 апреля 2020

Я использую "Карусель-3d" (импортировал его в глобальный проект), вот так 

import Carousel3d from 'vue-carousel-3d'
Vue.use(Carousel3d)

источник: https://wlada.github.io/vue-carousel-3d/guide/

Тогда Я пытался использовать его внутри модального

SingleStoreItem. vue file 

<template>
    <div>
        <carousel-3d>
             <slide v-for="index in item.images.length" :key="index-1" :index = item.images[index-1].id>
                   <img :src="item.images[index-1].src"> 
             </slide>
        </carousel-3d>
    </div>
</template>

<script>
export default {
    name: "SingleStoreItem",

    props: {
        item: Object
    },
};
</script>

Где item - это объект, который передается от родителя.

Проблема в том, что что, когда я открываю модал, это показывает Модал без карусели, обработанной

И когда я слегка перетаскиваю окно, чтобы изменить его размер, карусель появляется Модал с отображенной каруселью

И вот как я делаю модальный и передаю ему параметры. 

<b-modal :id="item.id"  size='xl' centered ok-only :title="item.name">
     <SingleStoreItem
      v-bind:item=item
     />
</b-modal>

1 Ответ

0 голосов
/ 23 апреля 2020

Я полагаю, что ваш модальный триггер как-то повлиял на жизненный цикл вашего SingleStoreItem.vue

Так как в вашем фрагменте кода не хватает кода esp. <script> в компоненте, очень боюсь, что мы не можем помочь.

но, вероятно, вам нужно иметь дело с:

  • родительскими mounted или method крючками 
mounted () {
    this.$nextTick(function () {
    // // Code that will run only after the
    // // entire view has been re-rendered
    })
  },
...