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

我只是猜測，但也許這為您指明了正確的方向，如果您提供最小的復制品，我將很樂意提供幫助。