Vue Click event not working on cloned slides (infinity: true)

[AlexisRoldan]

Hi!
I'm having an issue trying to fire the click event on the slides of a slick carousel when the infinite setting is enabled.

I'm guessing this happens because the cloned slides don't take the v-on:click with them when they are being cloned.

Code:

        <template v-for="(category, index) in categories">
          <div 
            class="card"
            :key="index"
            v-on:click="settingBrdc(category)"
          >
            <router-link :to="'/categories2/' + category.id" >
              <div class="row">
                <div class="col-12">
                  <img :src="category.thumbnail" width="415" height="245">
                </div>
                <div class="col-12 text-center">
                  <h4 class="card-title">{{ category.name }}</h4>
                </div>
              </div>
            </router-link>
          </div>
        </template>

The click event fires just fine on the slides that don't have the slick-cloned class.

Is there a fix or workaround for this issue?

Thanks in advance!

[gtempesta]

I have found a workaround by listening to events with jQuery (Vanilla JavaScript will do it as well). This is a workaround and not a real solution but here it goes:

Add a data-attribute to the DOM element where you need to listen to the event:

:data-id="category.id"

Listen for clicks on the card with jQuery (Vanilla JavaScript can do it but with more code) inside the mounted hook

$(this.$el).find('.card').on('click', (e) => {
  const categoryId = $(e.currentTarget).data('id');
  const category = this.categories.find(element => element.id === categoryId);
  this.settingBrdc(category);
});

If you do not have a key or id attribute in your categories you can do it with indexes or something similar.

[anhdo95]

You can use @init event on the Slick component to add a click event to each slide item as follow:

<Slick class="app-carousel" @init="handleInit">

and then

handleInit(event, slick) {
        const [ slickTrack ] = slick.$slideTrack

        $.each(slickTrack.childNodes, (index, slickSlide) => {
          // .app-carousel__link is an element inside each slide
          const data = $(slickSlide).find('.app-carousel__link').data('attribute-name')

          $(slickSlide).click((event) => {
            // Doing something
          })
        })
    }

I hope that the solution helps you!

[igorbuts]

I am also encountering this issue.
Maybe there going to be some solution for it without workarounds?