Vuejs v-for 循环中断列布局答案

【问题标题】：Vuejs v-for loop breaks column layoutVuejs v-for 循环中断列布局
【发布时间】：2018-09-21 21:57:22
【问题描述】：

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

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

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

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

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

建议表示赞赏

项目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 之前和之后都保持不变

【问题讨论】：

如果这是一个常见错误，请确保您的 .item 确实是您需要重复的项目，您添加 v-for 的元素是要重复的项目而不是只有内部的html。你能分享两个截图的html吗，很可能这与html结构有关。
在底部添加了
我改变的只是v-for线
好了，这是一个常见的错误，试着把你的 v-for 放在你的 .img-box-horizontal 元素上，而不是放在 .item 上
顺便说一句，确保您的 owl-carousel 在 vue.js 编译完 html 后实例化，这也可能是一个问题。

标签： javascript html vue.js

【解决方案1】：

你在

中使用需要 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>

【讨论】：