How to add data attribute to vue-slick-carousel component?

Question

Vue.js

I use the vue-slick-carousel component:

data() {
            return {
                info: [],
                loading: true,
                errored: false,
                slickOptions: {
                    dots: false,
                    infinite: false,
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    autoplay: true,

                    responsive: [
                        {
                            breakpoint: 1240,
                            settings: {
                                slidesToShow: 3,
                                dots: true,
                                autoplay: true,
                                arrows: false,

                            },
                        },
                        {
                            breakpoint: 980,
                            settings: {
                                slidesToShow: 2,
                                dots: true,
                                autoplay: true,
                                arrows: false,

                            },
                        },

                        {
                            breakpoint: 567,
                            settings: {
                                slidesToScroll: 1,
                                slidesToShow: 1,
                                centerPadding: '0px',
                                dots: true,
                                autoplay: true,
                                arrows: false,
                                centerMode: true,
                            },
                        },

                    ],

                },
            };
        },

<vue-slick-carousel  v-bind="slickOptions" :class="key" class="content__offers-box"
                            v-for="(offers, key) in info.offers"
        >
.....
      </vue-slick-carousel>

How to add data-attr to vue-slick-carousel tag? :data-id="key"does not work.

Answer 1

Since your data attribute is obviously not a parameter, it certainly should have been assigned to the component's root element, but the component's author chose to disable attribute inheritance . So it will have to be pinned down. We add a link to the component instance, after mounting we manually assign an attribute to the root element:

<vue-slick-carousel
  ref="slick"
  @hook:mounted="$refs.slick.$el.dataset.id = 666"
  ...