Как динамически передавать методы или переменные в компонент который рэндерится через v-for?

Question

[Максим js]

Есть компонент swiper который рэндерится через v-for. Он в себя принимает некоторые параметры @swiper="setThumbsSwiper" и :thumbs="{ swiper: thumbsSwiper }". Для каждого слайда нужно передать свой параметр, но как это сделать динамически? Пробовал делать массивы с переменными и методами и передавал в компонент как @swiper="arrSetThumbs[index]" :thumbs="{ swiper: arrThumbs[index] }", но так не работает(. Как в таких случаях это правильно сделать?

let thumbsSwiper1 = ref(null);
let thumbsSwiper2 = ref(null);
let thumbsSwiper3 = ref(null);

const setThumbsSwiper1 = (swiper) => {
  thumbsSwiper1.value = swiper;
}
const setThumbsSwiper2 = (swiper) => {
  thumbsSwiper2.value = swiper;
}
const setThumbsSwiper3 = (swiper) => {
  thumbsSwiper3.value = swiper;
}

Answer 1

[Aetae]

Вот смотри, прям беру твой код и пихаю как есть:

И смотри-ка, всё работает.
Проблема твоя где-то в другом месте.

P.S. По-нормальному это делается как-то так:

const thumbs = reactive([null, null, null]);
v-for="(swiper, i) in thumbs" @swiper="thumbs[i]=$event" :thumbs="{ swiper }"

Но может и ещё проще, если бы было больше контекста.:)

Comments

[Максим js]

Да, через массив передается все как надо. Проблема в том что при рендере я передаю в :thumbs null, так как swiper компонента еще не существует, а я его уже пихаю в :thumbs. Похоже через цикл не получится сделать никак

[Aetae]

Максим js, всмысле, блин? Ты сам ставишь null по умолчанию, до тех пор как не словишь событие из swiper. Ты не можешь передать то чего нет.
Опиши задачу подробнее, а то, чую, сейчас нагородишь огород.

[Максим js]

Aetae,
задача сделать слайдер с внутренними слайдерами у которых есть thumbs по клику на которые меняются слайды)

<SwiperSlide v-for="(slide, index) in slides"> ---- вот слайды со слайдером

      <Swiper @swiper="setThumbs[index]"> вот слайдер где передаю методы
        <SwiperSlide v-for="thumbs in slide.slides">
          {{ thumbs.img }}
        </SwiperSlide>
      </Swiper>

      <Swiper :thumbs="thumbs[index]"> тут рендер thumbs где передаю те верхние слайдеры, но тут null получается
        <SwiperSlide v-for="swipe in slide.slides">
          {{ swipe.img }}
        </SwiperSlide>
      </Swiper>

    </SwiperSlide>

let thumbsSwiper0 = ref(null);
let thumbsSwiper1 = ref(null);
let thumbsSwiper2 = ref(null);

const setThumbsSwiper0 = (swiper) => {
  thumbsSwiper0.value = swiper;
}
const setThumbsSwiper1 = (swiper) => {
  thumbsSwiper1.value = swiper;
}
const setThumbsSwiper2 = (swiper) => {
  thumbsSwiper2.value = swiper;
}

let setThumbs = [setThumbsSwiper0, setThumbsSwiper1, setThumbsSwiper2]
let thumbs = [thumbsSwiper0.value, thumbsSwiper1.value,thumbsSwiper2.value]