如何解决链接到 v-for 中的子路由的路由器链接被多次调用Vue.js 2
这是我找不到答案的第一个问题,所以我现在在这里发布。
我有一个组件,其中包含通过 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 次,但每次都只有我点击的课程)。
我不知道为什么会这样。如果我将路线从儿童路线更改为“正常”路线,则不会发生,但我会丢失“我的学习计划”路线的上下文,我希望它仍然在后台打开。
谁能告诉我为什么路由器链接的调用次数似乎与课程一样多?如果我不将路线定义为儿童,为什么它不会发生?
先谢谢你!
更新
所以我在一段时间后自己找到了解决方案:
我将我什至没有包含在循环内的代码片段中的 ,而不是它实际所属的父组件中。这意味着模态经常被打开,因为外循环运行了多次并且每次渲染视图。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。