#javascript #vue.js #vuejs2 #vue-router #v-for
Вопрос:
это мой первый вопрос, на который я не могу найти ответа, поэтому я публикую это здесь сейчас.
У меня есть компонент, в котором есть список курсов, которые отображаются с помощью цикла v-for. Для каждого курса у меня есть ссылка на маршрутизатор, которая ссылается на страницу сведений об этом курсе. Вот так:
<div class="courses">
<div
class="course"
v-for="(course, $courseIndex) in semester.plannedCourses"
:key="$courseIndex"
>
<router-link
class="course-content-container"
:to="{
name: 'baseModalParentCourse',
params: { code: course.code, semester: semesterName.name },
}"
>
<div
class="course-content-container-content"
>
<div class="course-content-container-content-text">
<p class="course-content-container-content-text--code">
{{ course.code }}
</p>
<p>{{ course.name }}</p>
</div>
</div>
</router-link>
</div>
</div>
Маршруты, которые я определил, выглядят так:
{
path: "/my-studyplan",
name: "StudyPlan",
component: StudyPlan,
children: [
{
path: ":code/:semester",
component: BaseModalParentCourse,
name: "baseModalParentCourse",
},
{
path: ":parentCode/:code/:semester",
component: BaseModalChildCourse,
name: "baseModalChildCourse",
},
],
},
При каждом щелчке по курсу открывается baseModalParentCourse
модальный файл и загружается материал. Но, глядя на консоль и вывод некоторого тестового кода в созданном крючке моего модала, я вижу, что он создается столько раз, сколько элементов в текущей строке (поэтому, если есть 6 курсов, он вызывается 6 раз, но каждый раз только с тем курсом, который я нажал).
Я не знаю, почему это происходит. Если я изменю маршруты с детских на «обычные», этого не произойдет, но я потеряю контекст маршрута «мой учебный план», который я хотел бы по-прежнему иметь открытым в фоновом режиме.
Может ли кто-нибудь сказать мне, почему канал маршрутизатора, кажется, вызывается столько раз, сколько существует курсов? И почему этого не происходит, если я не определяю маршрут как детский?
Заранее благодарю вас!
Обновить
Так что через некоторое время я сам нашел решение:
Я помещал то, что я даже не включал во фрагмент внутри цикла, вместо родительского компонента, которому он на самом деле принадлежал. Это означало, что модальный режим открывался так часто, потому что внешний цикл выполнялся несколько раз, и каждый раз представление отображалось.
Комментарии:
1. Примечание:
params: { code: course.code, semester: semesterName.name },
—semesterName
не определено2. @ShayaUlman Это определено в атрибутах данных. (не скопировал здесь весь файл целиком)