Vue+Ionic项目中如何将lesson.id传递给模态框openModal方法

解决方法 #

你只需要修改两处代码即可完成参数传递：

1. 修改模板中的点击事件，传递当前课程id
   在v-for循环内的评论点击事件中，把当前遍历到的lesson.id作为参数传入openModal方法：

<!-- 原来的写法 -->
<!-- <a @click="openModal">comments</a> -->
<!-- 修改为 -->
<a @click="openModal(lesson.id)">comments</a>

2. 修改openModal方法，接收参数并传递给模态框props
   给openModal方法添加入参接收课程id，替换掉原来写死的固定值1：

async openModal(lessonId) {
    const modal = await modalController.create({
        component: CommentsModal,
        componentProps: { id: lessonId },
    })
    return modal.present()
},

额外优化建议 #

你当前的v-for key绑定的是整个lesson对象，不符合Vue的最佳实践，建议修改为唯一值lesson.id避免不必要的重渲染问题：

<div
    class="lesson-card"
    v-for="lesson in lesson.video_lessons"
    :key="lesson.id"
>

内容的提问来源于stack exchange，提问作者blackrox