V-для итерации разрушает стили

Question

У меня есть слайдер, который состоит из продуктов.Прямо сейчас я получаю список продуктов с сервера и заполняю этот ползунок результатом, возвращаемым с сервера.Для этого у меня есть следующее

<div class="most_buy_slider container special_proposal">
                <div v-for="product in mostBoughtProducts">
                    <div>
                        <div class="goods_item">
                            <img :src="product.ProductPreviewImages[0]">
                            <div class="name">
                                {{product.Name}}
                                <span>{{product.Manufacturer}}</span>
                            </div>
                            <div class="price">{{product.Price}} грн</div>
                            <div class="economy">економія складає 57% від роздрібної вартості</div>
                            <div class="to_cart">
                                <button type="button" class="btn but_blue">в кошик</button>
                            </div>
                        </div>
                    </div>
                </div>
</div>

Но этот результат в следующем:

однако, когда я рендерим простой HTMLбез v-для он загружается правильно.

<div class="most_buy_slider container bigger_width special_proposal">
            <div>
                <div v-for="index in 10" class="goods_item">
                    <img src="images/samples/whiskyjackdan.png">
                        <div class="name">
                            Вологі серветки Вологі серветки Вологі серветки Вологі серветки 
                            <span>Ruta Selecta Ruta SelectaRuta SelectaRuta Selecta</span> 
                        </div>
                        <div class="price">
                            45,55 грн
                        </div>
                        <div class="economy">
                            економія складає 57% від роздрібної вартості 
                        </div>
                            <div class="to_cart">
                                <button type="button" class="btn but_blue">в кошик</button>
                            </div>
                </div>
            </div>
            <div>
                <div class="goods_item">
                    <img src="images/samples/ruta1.png">
                        <div class="name">
                            Вологі серветки 
                            <span>Ruta Selecta</span> 
                        </div>
                        <div class="price">
                            45,55 грн
                        </div>
                        <div class="economy">
                            економія складає 57% від роздрібної вартості 
                        </div>
                            <div class="to_cart">
                                <button type="button" class="btn but_blue">в кошик</button>
                            </div>
                </div>
            </div>

Answer 1

Я наконец-то решил проблему с использованием ползунка Slick для отображения элементов.Пока данные загружаются с сервера, скользящий слайдер уже инициализируется с нулевым элементом.И когда элементы были загружены с сервера, vue.js вставляет данные в слайдер, но слайдер по-прежнему предполагает, что у него есть элемент 0.

Таким образом, решение состоит в том, чтобы повторно инициализировать скользящий слайдер, когда данные загружаются изсервер.Я позвонил после загрузки данных:

reInit() {
        $('.most_buy_slider').slick('unslick');
        $(".most_buy_slider").slick(this.sliderSettings())
    }

sliderSettings() {
        return {
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 1
        }
    }

Answer 2

Я не знаю ваш CSS, но в первом фрагменте кода, который вы включили, вы используете дополнительный div для директивы v-for , которая может нарушить ваши стили.

Попробуйте вместо этого код:

<div class="most_buy_slider container special_proposal">
  <div v-for="product in mostBoughtProducts">
    <div class="goods_item">
      <img :src="product.ProductPreviewImages[0]" />
      <div class="name">
        {{ product.Name }}
        <span>{{ product.Manufacturer }}</span>
      </div>
      <div class="price">{{ product.Price }} грн</div>
      <div class="economy">економія складає 57% від роздрібної вартості</div>
      <div class="to_cart">
        <button type="button" class="btn but_blue">в кошик</button>
      </div>
    </div>
  </div>
</div>