vueper-slides icon indicating copy to clipboard operation
vueper-slides copied to clipboard

Slides stop working when receiving slides data from props

Open LeoYudi opened this issue 3 years ago • 0 comments

I'm having a problem when using slides that receive the slides data from props.

<vueper-slides :infinite="false" :bullets="false" fixedHeight="250px" class="no-shadow" :visibleSlides="3.5" :gap="5" :draggingDistance="20">
  <vueper-slide v-for="(slide, i) in slides" :key="i">
    <template #content>
      <a :href="slide.url" target="_blank">
        <div class="vueperslide__content-wrapper" style="flex-direction: row">
          <div class="cardTip">
            <p>{{ slide.title }}</p>
            <div class="iconTip"></div>
          </div>
        </div>
      </a>
    </template>
  </vueper-slide>
</vueper-slides>

Basically, when i do this it works:

data(){
  return { slides: [{ title: 'test', url: 'test' }] }
}

But, props makes the drag and arrows click stop working:

props: {
  slides: Array,
},

I'm using Vue with Nuxt, so maybe that's a problem with ssr lifecycle ?

LeoYudi avatar Mar 22 '22 20:03 LeoYudi