маршрутизатор-ссылка, которая ссылается на дочерний маршрут внутри v-for, вызывается несколько раз (Vue.js 2)

#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 Это определено в атрибутах данных. (не скопировал здесь весь файл целиком)