Vuejs и Slick Carousel - проблема с v-for не может добавить элемент в карусель

Question

Я использую vue -slick , но у меня возникли проблемы с v-for l oop.

Это мой код:

<slick
                        ref="slick"
                        :options="slickOptions"
                        class="float-left full-width slider-ingredients">
                            <div
                                v-for="ingredient in available_prots_source"
                                :key="ingredient.id"
                                @click="onSelectIngredient(ingredient.id, 'prots')"
                                class="slider-ingredient-item">
                                <div class="float-left ingredient-image">
                                    <div class="content">
                                        <img :src="ingredient.image" width="200" height="200" class="float-left cover-fit">
                                    </div>
                                </div>
                                <h4 class="float-left full-width text-center ingredient-name">
                                    {{ingredient.name}}
                                </h4>
                                <span class="float-left full-width text-center ingredient-details">
                                    dettagli
                                </span>
                            </div>
                    </slick>

Проблема в том, что мой div добавлен за пределы скользкого контейнера. Если я добавляю <div> сразу после открывающего тега <slick>, он отображается правильно, но видит только один элемент, даже если мой v-for добавляет 4 или 5 элементов.

Что я делаю не так?
Как я могу использовать пятно с v-for петлями?

Answer 1

от официального README (см. Метод reInit в README.md

// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
  this.$refs.slick.reSlick();
});