Customize pagination dots on VueJS3 composition API

[djcaesar9114]

First of all: thanks for this marvelous work, it's amazing.

It would be great if we could customize dots. I explain myself: one of my usages for Splide is to ask users questions, and they should see which questions remain to be answered showing a red dot, the green dots would represent answered ones.
It would be even better if we could use ❌ or ✅.

FYI I'm using Splide with VueJS 3 ans composition API.

[NaotoshiFujita]

Here is the solution:
https://splidejs.com/guides/pagination/#custom-pagination

You can listen to the splide event through the component:
https://splidejs.com/integration/vue-splide/#events

[djcaesar9114]

I understand the principle, but actually there is no splide event involved. If the user answers the question, let's say it fires a "questionAnswered" event: how the Splide could get it?

Do you mean I could write

<Splide ref="splide" @questionAnswered="updatePagination"></Splide>

function updatePagination( question ) {
  // do something to update the pagination
}

[NaotoshiFujita]

In that case, you can access each item though the Pagination component.

function updatePagination( question ) {
  const splide = splide.value.splide; // Retrieves the splide instance from the ref object
  const items  = splide.Components.Pagination.items;
  const item   = items[ question ]; // I guess the question is an index
}

https://splidejs.com/components/pagination/

[djcaesar9114]

Thanks a lot, it works like a charm :)