I am currently facing an issue while attempting to create a carousel using Siema. The problem arises when the slides are generated using a v-for loop.
Although I am not receiving any errors, I suspect that the new Siema function is being called before the v-for loop finishes executing.
The JavaScript code is placed within the mounted() lifecycle hook of my component.
Is there a way to ensure that it works with v-for and avoid using static divisions?
App.vue
<template>
<carousel :my-array="myArray"></carousel>
</template>
Carousel.vue (not functioning)
<template>
<div class="siema">
<div v-for="(element, index) in myArray">{{index}}</div>
</div>
</template>
<script>
import Siema from 'siema';
export default{
props: ['myArray'],
mounted() {
new Siema();
}
}
</script>
Carousel.vue (working)
<template>
<div class="siema">
<div>Hi, I'm slide 1</div>
<div>Hi, I'm slide 2</div>
<div>Hi, I'm slide 3</div>
<div>Hi, I'm slide 4</div>
</div>
</template>
<script>
import Siema from 'siema';
export default{
props: ['myArray'],
mounted() {
new Siema();
}
}
</script>