Vuejs list rendering after applying v-for

Question

i have this kind html in my vue template: it is a simple list rendering

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

the data-partial-height="40", data-toggle="popover" and data-trigger="click" was working fine at first. but once i add the v-for="lesson in lessons":key="lesson.id", and successfully generate the loop through the lessons array, all the styling is broken. i try to bind the value of data-partial-height="40", data-toggle="popover" and data-trigger="click" to the data property, but still nothing change. any solution?

Answer 1

Could it be that you're putting your v-for in the wrong element? Right now you have it in you upper-level container <div class="col-sm-6 col-md-4 col-lg-3>" so, once you have more than one element in your list (say 10) you will end up with 10 <div class="col-sm-6 col-md-4 col-lg-3" containers that judging by the classes it uses most likely will be placed side-by-side.

In the other hand if you place your v-for in your inner container <div class="card card--elevated... then the result for 10 elements will be somethig like:

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

I'm just guessing but maybe this points you on the right direction, if you provide a minimal reproduction I'll be happy to help.