Блог

Главная - Вопросы по программированию - Рендеринг списка Vuejs после применения v-for

Рендеринг списка Vuejs после применения v-for

#javascript #html #css #vuejs2 #vue-component

#javascript #HTML #css #vuejs2 #vue-компонент

Вопрос:

в моем шаблоне 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>

данные-partial-height =»40″ , data-toggle = «всплывающее окно» и data-trigger = «щелчок» поначалу работали нормально. но как только я добавлю v-for =»урок в уроках»:key =»lesson.id » и успешного создания цикла через массив lessons, весь стиль нарушен. я пытаюсь привязать значение data-partial-height = «40», data-toggle = «popover» и data-trigger =»click» к свойству data, но по-прежнему ничего не меняется. есть решение?

Ответ №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>

Я просто предполагаю, но, возможно, это указывает вам правильное направление, если вы предоставите минимальное воспроизведение, я буду рад помочь.

Комментарии:

1. перед использованием v-for я пытаюсь максимально дублировать <div class="col-sm-6 col-md-4 col-lg-3> , и все работает нормально. Всплывающее окно работает отлично.. но после использования v-for все данные отображались, как ожидалось, но «data-partial-height=»40″ data-toggle=»popover» data-trigger =»click»` потерял свою функциональность