CODEWITHSUNDEEP
vuejs3swiper.jsrefvue-composition-api
Ali
Ali

Reputation: 67

How use function ref inside swiper slide

I am trying to use function ref inside swiper slide, but get duplicated results.

<swiper-slide>
    <first-step :ref="(el) => { steps.push(el)}" />
</swiper-slide> 
<swiper-slide>
   <second-step :ref="(el) => { steps.push(el)}" />
</swiper-slide>

setup(){
   const steps = ref([]);
   return { steps}
}

Upvotes: 0

Views: 559

Answers (1)

ahcl
ahcl

Reputation: 32

As mentioned in Vue document, when using function refs, the bound function will be called every time component is updated. And component is being updated many times during its lifetime, that why some els are duplicated.

To prevent duplication, I think you should create multiple refs instances and combine them by a computed like this.

<swiper-slide>
    <first-step ref="firstStepRef" />
</swiper-slide> 
<swiper-slide>
   <second-step ref="secondStepRef" />
</swiper-slide>

setup(){
   const firstStepRef = ref(null);
   const secondStepRef = ref(null);
   function getEl(elRef) {
      if (!elRef.value) return null;
      return elRef.value.$el;
   )
   const steps = computed(() => {
      return [getEl(firstStepRef), getEl(secondStepRef)];
   }
   return { steps}
}

ps: above code is not well-tested yet.

Upvotes: 1

Related Questions