@astrodeep

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

Использую компонент 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" не работает.
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
Поскольку ваш data-атрибут очевидно не является параметром, он конечно должен был быть назначен корневому элементу компонента, но автор компонента наследование атрибутов решил отключить. Так что придётся закостылить. Добавляем ссылку на экземпляр компонента, после монтирования вручную назначаем корневому элементу атрибут:

<vue-slick-carousel
  ref="slick"
  @hook:mounted="$refs.slick.$el.dataset.id = 666"
  ...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы