Vue.js v-for循环中断列布局

Question

我有一个v-for循环，如下所示，在axios请求之后，该循环将为艺术家建立我的曲目显示。

<div class="item" v-for="i in Math.ceil(tracks.length / 5)">
    ....
</div>
<div class="item">
    ....
</div>

现在，当我删除v-for时，页面就是这样

但是当我添加v-时，它看起来像这样：

是否有他们不再并排坐下的原因，在下载曲目之前，我是否需要阻止此块运行？我不确定。

建议表示赞赏

项目div的全部内容：

<div class="item">
    <div class="img-box-horizontal music-img-box h-g-bg h-d-shadow">
        <div class="img-box img-box-sm box-rounded-sm">
            <img src="/assets/images/hot-song/hot-1.jpg" alt="">
        </div>
        <div class="des">
            <h6 class="title"><a href="#">The Separation</a></h6>
            <p class="sub-title"><a href="#">Rachel Platten</a></p>
        </div>
        <div class="hover-state d-flex justify-content-between align-items-center">
            <span class="pointer play-btn-dark box-rounded-sm"><i class="play-icon"></i></span>
            <div class="d-flex align-items-center">
                <span class="adonis-icon text-light pointer mr-2 icon-2x"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><use xlink:href="#icon-heart-blank"></use></svg></span>
                <span class="pointer dropdown-menu-toggle"><span class="icon-dot-nav-horizontal text-light"></span></span>
            </div>
        </div>
    </div>
    <div class="img-box-horizontal music-img-box h-g-bg h-d-shadow">
        <div class="img-box img-box-sm box-rounded-sm">
            <img src="/assets/images/hot-song/hot-2.jpg" alt="">
        </div>
        <div class="des">
            <h6 class="title"><a href="#">Country girl shake it for me</a></h6>
            <p class="sub-title"><a href="#">Bing Crosby</a></p>
        </div>
        <div class="hover-state d-flex justify-content-between align-items-center">
            <span class="pointer play-btn-dark box-rounded-sm"><i class="play-icon"></i></span>
            <div class="d-flex align-items-center">
                <span class="adonis-icon text-light pointer mr-2 icon-2x"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><use xlink:href="#icon-heart-blank"></use></svg></span>
                <span class="pointer dropdown-menu-toggle"><span class="icon-dot-nav-horizontal text-light"></span></span>
            </div>
        </div>
    </div>
    <div class="img-box-horizontal music-img-box h-g-bg h-d-shadow">
        <div class="img-box img-box-sm box-rounded-sm">
            <img src="/assets/images/hot-song/hot-3.jpg" alt="">
        </div>
        <div class="des">
            <h6 class="title"><a href="#">Stirring of a fool</a></h6>
            <p class="sub-title"><a href="#">Rachel Platten</a></p>
        </div>
        <div class="hover-state d-flex justify-content-between align-items-center">
            <span class="pointer play-btn-dark box-rounded-sm"><i class="play-icon"></i></span>
            <div class="d-flex align-items-center">
                <span class="adonis-icon text-light pointer mr-2 icon-2x"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><use xlink:href="#icon-heart-blank"></use></svg></span>
                <span class="pointer dropdown-menu-toggle"><span class="icon-dot-nav-horizontal text-light"></span></span>
            </div>
        </div>
    </div>
    <div class="img-box-horizontal music-img-box h-g-bg h-d-shadow">
        <div class="img-box img-box-sm box-rounded-sm">
            <img src="/assets/images/hot-song/hot-4.jpg" alt="">
        </div>
        <div class="des">
            <h6 class="title"><a href="#">Nothings into Somethings</a></h6>
            <p class="sub-title"><a href="#">Rachel Platten</a></p>
        </div>
        <div class="hover-state d-flex justify-content-between align-items-center">
            <span class="pointer play-btn-dark box-rounded-sm"><i class="play-icon"></i></span>
            <div class="d-flex align-items-center">
                <span class="adonis-icon text-light pointer mr-2 icon-2x"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><use xlink:href="#icon-heart-blank"></use></svg></span>
                <span class="pointer dropdown-menu-toggle"><span class="icon-dot-nav-horizontal text-light"></span></span>
            </div>
        </div>
    </div>
    <div class="img-box-horizontal music-img-box h-g-bg h-d-shadow">
        <div class="img-box img-box-sm box-rounded-sm">
            <img src="/assets/images/hot-song/hot-5.jpg" alt="">
        </div>
        <div class="des">
            <h6 class="title"><a href="#">Let You Down</a></h6>
            <p class="sub-title"><a href="#">Rachel Platten</a></p>
        </div>
        <div class="hover-state d-flex justify-content-between align-items-center">
            <span class="pointer play-btn-dark box-rounded-sm"><i class="play-icon"></i></span>
            <div class="d-flex align-items-center">
                <span class="adonis-icon text-light pointer mr-2 icon-2x"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><use xlink:href="#icon-heart-blank"></use></svg></span>
                <span class="pointer dropdown-menu-toggle"><span class="icon-dot-nav-horizontal text-light"></span></span>
            </div>
        </div>
    </div>
</div>

在添加v-for之前和之后，这都是相同的

Answer 1

您在

中使用Need v-for

//example 1
<ul>
  <li v-for="(item,index) in items">{item.name}</li>
</ul>

//example 2
<div class="item">
  <acticle v-for="(item,index) in items">
      <h2>{item.name}</h2>
      <span>date:{item.date}</span>
  </acticle>
</div>