Ссылка на элемент не сохраняется в переменной во Vue
У меня есть <Swiper @swiper="onSwiper"></Swiper>
и const swiperRef = ref(null).
Когда я вывожу в лог swiperRef.value, то оно выводится всегда корректно, но когда хочу использовать какой-то метод, например slideTo, то после первого применения этого метода выводится ошибка. Вот контекст использования, пишу с помощью <script setup>
:
//сам свайпер
<Swiper ref="swiperRef" @swiper="onSwiper">
<SwiperSlide v-for="day in markedDays" :key="day.event"><span>{{ day.event }}</span><span>{{
day.date }}</span></SwiperSlide>
</Swiper>
//Вот тут я использую нужный мне метод
<div v-for="day in days" :key="day"
:class="{ 'marked': isMarked(day), 'active': isActive(day) }" class="calendar-day" @click="() => {
toggleActive(day);
slideToMarkedDay();
}">
{{ parseInt(day.split('-')[2]) }}
</div>
//Это инициализация
const onSwiper = (swiper: Swiper) => {
swiperRef.value = swiper;
console.log(swiperRef.value);
}
//Вот функция, в которой я использую метод
const slideToMarkedDay = (day: string) => {
if (swiperRef.value) {
const markedDayIndex = markedDays.value.findIndex(markedDay => markedDay.date === day);
if (markedDayIndex !== -1) {
swiperRef.value.slideTo(markedDayIndex);
}
}
};
Я пытался с помощью onMounted инициализировать свайпер через new, пробовал менять местами свайпер с элементом, где я использую метод, но результат один - ошибка