Vuejs 和 Slick Carousel - v-for 的问题无法在 carousel 中添加元素

Question

我正在使用 vue-slick 组件，但 v-for 循环有一些问题。

这是我的代码：

<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 被添加到 slick 容器之外。如果我在 <slick> 开始标记之后添加一个 <div>，它会正确呈现，但即使我的 v-for 添加 4 或 5 个元素，它也只能看到一个元素。

我做错了什么？
如何将 slick 与 v-for 循环一起使用？

Answer 1

来自官方 README（参见 README.md

中的方法 reInit

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

Vuejs 和 Slick Carousel - v-for 的问题无法在 carousel 中添加元素

Vuejs and Slick Carousel - problem with v-for can't add element in carousel

vue.js

slick.js