应用 v-for 后的 Vuejs 列表渲染

Question

我的 vue 模板中有这种 html：它是一个简单的列表渲染

<div class="col-sm-6 col-md-4 col-lg-3" v-for="(lesson) in lessons" :key="lesson.id">
                        <div class="card card--elevated card-course overlay js-overlay mdk-reveal js-mdk-reveal "
                            data-partial-height="40" data-toggle="popover" data-trigger="click">

                            <a href="course.html" class="js-image" data-position="left">
                                <img :src="lesson.cover_image" alt="course">
                                <span class="overlay__content">
                                    <span class="overlay__action d-flex flex-column text-center">
                                        <i class="material-icons">play_circle_outline</i>
                                        <small>Preview course</small>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>

data-partial-height="40" 、 data-toggle="popover" 和 data-trigger="click" 起初工作正常。但是一旦我在课程中添加了 v-for="lesson" :key="lesson.id"，并通过课程数组成功生成循环，所有样式都被破坏了。我尝试将 data-partial-height="40"、data-toggle="popover" 和 data-trigger="click" 的值绑定到 data 属性，但仍然没有任何变化。有什么解决办法吗？

Answer 1

可能是您将v-for 放入了错误的元素中吗？ 现在你有它在你的上层容器<div class="col-sm-6 col-md-4 col-lg-3>" 所以，一旦你的列表中有多个元素（比如 10 个），你最终会得到 10 个<div class="col-sm-6 col-md-4 col-lg-3" 容器，根据它使用的类来判断最有可能会并排放置。

另一方面，如果您将 v-for 放在内部容器 <div class="card card--elevated ... 中，那么 10 个元素的结果将类似于：

<div class="col-sm-6 col-md-4 col-lg-3>
    <div class="card card--elevated ...
    <div class="card card--elevated ...
    <div class="card card--elevated ...`
    ...

<div>

我只是猜测，但也许这为您指明了正确的方向，如果您提供最小的复制品，我将很乐意提供帮助。