Как связать два слайдера vue-slick-carousel?

Question

[Милана Череватенко]

Хотела попросить помощи в настройке связи между двумя снайперами, сделанными на vue-slick-carousel.

<div class="preview">
                    <VueSlickCarousel
                        ref="preview"
                        :asNavFor="$refs.miniPreview"
                        :focusOnSelect="true"
                        :fade="true"
                        :arrow="false">
                        <div class="preview-slide" v-for="image in images">
                            <img :src="image" alt="{{project.title}}">
                        </div>
                    </VueSlickCarousel>
                </div>
                <div class="mini-slider">
                    <VueSlickCarousel
                        ref="miniPreview"
                        :slidesToShow="1"
                        :variableWidth="true"
                        :focusOnSelect="true"
                        :arrow="true"
                        :centerMode="true">
                        <div class="mini-preview" v-for="image in images">
                            <img :src="image" alt="{{project.title}}">
                        </div>
                        <template #prevArrow>
                            <div class="btn-prev">
                                <i class="fas fa-chevron-left"></i>
                            </div>
                        </template>
                        <template #nextArrow>
                            <div class="btn-next">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </template>
                    </VueSlickCarousel>
                </div>

Answer 1

[0xD34F]

:asNavFor="$refs.miniPreview"

Почему это не работает, как подсказывает документация:

$refs заполняются только после того, как компонент был отрисован, и они не реактивны. Это подразумевается только как обходной путь для прямого манипулирования потомками — вам следует избегать доступа к $refs из шаблонов или вычисляемых свойств.

В качестве костыльного решения - можно принудительно обновить компонент после монтирования, тогда при повторном рендеринге слайдеры получат правильные ссылки:

mounted() {
  this.$nextTick(this.$forceUpdate);
},

https://jsfiddle.net/kpvwcsz7/

Comments

[Милана Череватенко]

Спасибо огромное