Как добавить data-атрибут в компонент vue-slick-carousel?

Question

[Алекс]

Использую компонент vue-slick-carousel:

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>

Как добавить data-attr в тег vue-slick-carousel? :data-id="key" не работает.

Answer 1

[0xD34F]

Поскольку ваш data-атрибут очевидно не является параметром, он конечно должен был быть назначен корневому элементу компонента, но автор компонента наследование атрибутов решил отключить. Так что придётся закостылить. Добавляем ссылку на экземпляр компонента, после монтирования вручную назначаем корневому элементу атрибут:

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

UPD. Раз у вас там v-for, значит вместо одной ссылки на экземпляр, будет массив. Надо индекс указывать. Ну и не забывать о том, что соответствие порядка элементов в массиве ссылок на экземпляры порядку элементов в массиве с данными не гарантируется.

https://jsfiddle.net/v6pot7nr/

Comments

[Алекс]

чет не работает "TypeError: $refs.slick.$el is undefined"

[0xD34F]

Не выдумывайте, работает.

[Алекс]

0xD34F, Может из за того что данные приходят из api?

mounted() {
            axios
                .get('http://test-dev.ru/offersIndex')
                .then(response => {
                    this.info = response.data;
                })
                .catch(error => {
                    console.log(error);
                    this.errored = true;
                })
                .finally(() => (this.loading = false));

        },

[0xD34F]

Нет, гадать по представленным огрызкам кода какие ещё могут быть косяки - занятие малоперспективное. Воспроизведите свою ситуацию в песочнице, ссылку сюда.

UPD. Хотя нет, догадаться можно - тех огрызков, что вы показали, достаточно. Дополнил ответ.

[Алекс]

0xD34F, Штош, более не задерживаю, спасибо вам за уделенное время