javascript - V-for 迭代破坏了样式

Question

我有一个由产品组成的 slider 。现在我正在从服务器获取产品列表，并使用从服务器返回的结果填充该 slider 。为此，我有以下内容

<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-for 的简单 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>