I'm using Vue-splide with the latest version. I want to handle the "click" event, so I wrote

<Splide
  @splide:click="test"
  :options="options">

function test(e) {
  console.log(e);
}

In the console I have a weird Proxy { <target>: {…}, <handler>: {…} } appearing. What I would do is doing something with the property data-img of the slide clicked:

  <SplideSlide
    v-for="(photo, i) in projet.fichiers.filter((x) => x.type.includes('image'))"
    :key="`photosplide-${i}`"
    :data-img="``${photo.url}">

I initially put a @click="test" on the SplideSlide but the test launched randomly: sometimes it did, sometimes it didn't, I don't know why. I suppose it's cleaner to handle the event with the native event handling from Splide.

How could I handle the data-img attribute in my test function?

Here is the page of Vue-Splide integration: https://splidejs.com/integration/vue-splide/ And documentation on the click event I'd like to handle: https://splidejs.com/guides/events/#click

Thanks in advance