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

数据部分高度=“40”、数据切换=“popover”和数据触发器=“click”一开始工作得很好。但是，一旦我添加了v-：key==“lesson in lessons”和“lesson.id”，并成功地通过lessons数组生成了循环，所有样式都被破坏了。我尝试将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>

我只是猜测，但这可能会给你指明正确的方向，如果你提供最小的复制，我很乐意帮助你。