Check out this easy carousel:
<template>
<div ref="wrapperRef" class="js-carousel container">
<div class="row">
<slot></slot>
</div>
<div class="row">
<template v-for="n in noOfSlides" :key="n">
<span style="margin-right: 25px;" @click="console.log(n)">O</span>
</template>
</div>
</div>
</template>
This code is using the Options API. The number of slides (noOfSlides) updates correctly and triggers a re-render after mounting.
export default {
name: 'carousel',
data() {
return {
noOfSlides: 0
}
},
mounted(){
this.noOfSlides = this.$refs.wrapperRef.querySelectorAll('.js-carousel-item').length;
}
}
However, there seems to be an issue with the Composition API implementation below. The value of noOfSlides does not update, resulting in the for-loop not re-rendering as expected.
export default {
name: 'carousel',
setup() {
const wrapperRef = ref(null);
let noOfSlides = ref(0);
onMounted(function () {
noOfSlides = wrapperRef.value.querySelectorAll('.js-carousel-item').length; // This line should retrieve the correct number of slides (if more than 0)
})
return {
wrapperRef,
noOfSlides
}
}
}
What could be causing the discrepancy here?