Carousel data is not updating on template

[slobodadev]

Hello !
I've this logic in vue component:

<carousel v-if="presentedImages.length" :items-to-show="2" :snapAlign="'start'" :breakpoints="breakpoints" :wrap-around="true">
    <slide class="slide" v-for="image in presentedImages" :key="image.id">
        <img v-if="image.attachment_url" class="videoFile" :src="image.attachment_url" />
        <div  @click="deleteImage(image.id)" class="fa-stack remove-button cross-btn">
          <i class="fa fa-times"></i>
        </div>
    </slide>
    <template #addons>
        <navigation />
    </template>
</carousel>

const presentedImages = ref(props.images);
const deleteImage = (id) => {
    removeAttachment(id).then(res => {
      presentedImages.value = presentedImages.value.filter(img => {
        return img.id !== id;
      });
    })
    .catch(err => console.log(err))
  }
      

Can you please answer me why data into carousel components is not updated when I delete a image? FYI: Ref is updating in script.

[amarecc]

Hello, did you find any solutions ? I have the same problem and i can think of none

[slobodadev]

Unfortunate no. I tried to update ref through parent and also create ref like this:
const { images: presentedImages } = toRefs(props);
There is no result at the moment. Any ideas more?

[ismail9k]

Hello @amarecc,
I could not guess how you implemented removeAttachment(), so I can not figure out what's the issue you are facing.
However, I've created a sandbox example on how to dynamically remove items from the carousel compeont

[amarecc]

Hello,
I was using your component for a school project and wasn't aware of the fact that i needed to use "ref()" to make my primitive data a reactive property. Sorry for the inconvenience i should have read the documentation more carefully.

[ismail9k]

No worries, it's great that it worked!