Problem using v-for insite slick div

[gmargetis]

hello i am calling with api categories. i use the following to populate them inside carousel

<VueSlickCarousel v-bind="settings"> <div v-for="(category, index) in getCategories" v-text="category.title" :key="index" class="fancy-btn m-6" > </div> </VueSlickCarousel>

Good thing is that it works, well kind of. Instead of multiple divs my categories populate inside one so i get only one slide. is there any fix?

[danieden]

Can you fix the error ?

I have the same problem.

[pheitland]

@danieden @gmargetis Try this (I only work with the new composition api, so untested)

<VueSlickCarousel v-bind="settings"> <div v-for="(category, index) in getCategories" :key="index" class="fancy-btn m-6" > <div v-text="category.title" /> </div> </VueSlickCarousel>

[aalicki]

@pheitland - this suggestion doesn't seem to work unfortunately.

I'm also experiencing the same issue, utilizing async doesn't seem to resolve things either. The error is as follows:

[Vue warn]: Error in render: "TypeError: this.$slots.default is undefined"

found in

---> <InnerSlider>
       <VueSlickCarousel>
         <RecentlyWatchedSlick> at resources/js/components/Sliders/RecentlyWatchedSlick.vue
           <Root>

[1e4]

@aalicki I too have just had this issue, my fix was the following (Adding the v-if)

<VueSlickCarousel v-bind="slideSettings" v-if="myData.length > 0">

Seems to try to render before the data is actually there perhaps? Either way solved it for me, hope it solves it for you too

[aalicki]

@1e4 - this solves the issue for me. I was under the assumption that I could have the axios call (which I use to fetch some data for the slides) be async. Thanks for the tip and fix :)

[1e4]

@1e4 - this solves the issue for me. I was under the assumption that I could have the axios call (which I use to fetch some data for the slides) be async. Thanks for the tip and fix :)

Glad to know it helped :+1:

[afshar98]

@aalicki I too have just had this issue, my fix was the following (Adding the v-if)

<VueSlickCarousel v-bind="slideSettings" v-if="myData.length > 0">

Seems to try to render before the data is actually there perhaps? Either way solved it for me, hope it solves it for you too

Thanks It worked for me

[Iran-110]

Hi, I've made some minor fixes to address this and similar issues in these commits: https://github.com/Iran-110/vue-slick-carousel-rtl/commit/506d90e896a02eec131024782aac13518992502d https://github.com/Iran-110/vue-slick-carousel-rtl/commit/d2215348cbd079f7499feacc8e41689acc277832 https://github.com/Iran-110/vue-slick-carousel-rtl/commit/3323a96394009010124294b88169a1ed180493d8 https://github.com/Iran-110/vue-slick-carousel-rtl/commit/f36491a6d14eba67145ed7313f95f7ba9bf0dd08

All available in master: vue-slick-carousel-rtl