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>

但这会导致以下结果：

但是，当我渲染不带v的简单html时，它将正确加载。

<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

我不知道您的CSS，但是在您包含的第一个代码段中，您对 v-for 指令使用了额外的div，这可能会破坏样式。

请尝试以下代码：

<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>

Answer 2

我终于解决了问题我正在使用Slick滑块显示项目。从服务器加载数据时，滑动滑块已被初始化为0。并且，当从服务器加载项目时，vue.js会将数据插入到滑块中，但滑块仍假定它具有0个项目。

因此，解决方案是从服务器加载数据时重新初始化平滑滑块。数据加载后，我调用了以下内容：

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

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

V-for迭代破坏了样式

2 个答案: