search

ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
660 stars 164 forks source link

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'index') when use v-if #277

Closed joneus3107 closed 1 year ago

joneus3107 commented 1 year ago

Good afternoon, I am new to using Vue and vue3-carousel I don't know how to say it but it seems vue3-carousel works fine with v-for but it doesn't work with v-if For example I have this code:

<Carousel
    :wrap-around="true"
    :autoplay="5000"
 >
  <template v-for="(image, index) in item.images" :key="index">
    <Slide v-if="image">
          <img :src="image" :alt="item.name + '_'+index"/>
    </Slide>
  </template>
</Carousel>

-> The displaying of the Slide looks weird so I have changed the way to use

This is my new way

<Carousel
                      :wrap-around="true"
                      :autoplay="5000"
                    >
                      <Slide v-if="item.images[0]">
                        <img :src="item.images[0]" :alt="item.name + '_01'"/>
                      </Slide>
                      <Slide v-if="item.images[1]">
                        <img :src="item.images[1]" :alt="item.name + '_02'"/>
                      </Slide>
                      <Slide v-if="item.images[2]">
                        <img :src="item.images[2]" :alt="item.name + '_03'"/>
                      </Slide>
                      <Slide v-if="item.images[3]">
                        <img :src="item.images[3]" :alt="item.name + '_04'"/>
                      </Slide>
                      <Slide v-if="item.images[4]">
                        <img :src="item.images[4]" :alt="item.name + '_05'"/>
                      </Slide>
                      <template #addons>
                        <Pagination class="custom-pagination" />
                      </template>
                    </Carousel>

And the Slide didn't work and I receive this message

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'index')

Can you let me know how can I use v-if to check the images doesn't empty or not, please?

Thank you.

babu-ch commented 1 year ago

@joneus3107

Maybe filter item.images (or provide filtered images in computed)

  <template v-for="(image, index) in item.images.filter(Boolean)" :key="index">