Im using Vue and Ionic, I dont know how to pass my lesson.id to the method openModal()

explanation: I have a card with my data - lesson data, where are also comments, when user clicks on them, modal window is open, I need to pass id of the lesson to my modal window as props, so I can display comments for the lesson.

<ion-content>
            <div
                
                v-for="lesson in lesson.video_lessons"
                :key="lesson"
            >
                <div >
                    <h2>{{ lesson.content_description }}</h2>
                    <div >
                        <span v-for="tag in lesson.tags" :key="tag">
                            #{{ tag }}
                        </span>
                    </div>
                    <img
                        v-if="lesson.content_thumbnail"
                        :src="`${lesson.content_thumbnail}`"
                        alt="theme-img"
                        height="600"
                    />
                </div>
                <div >
                    <a href="#">bookmark</a>
                    <a href="#">heart</a>
                    <p>{{ lesson.likes }}</p>
                    <a @click="openModal">comments</a>
                    <p>lesson id: {{ lesson.id }}</p>
                </div>
            </div>
</ion-content>

this is my method

async openModal() {
            const modal = await modalController.create({
                component: CommentsModal,
                componentProps: { id: 1 }, // i need to replace this 1 with id of the lesson
            })
            return modal.present()
        },

CodePudding user response：

In template, pass it like

<a @click="openModal(lession.id)">comments</a>

and in method

async openModal(payload) { // change added
            const modal = await modalController.create({
                component: CommentsModal,
                componentProps: { id: payload}, // Change added
            })
            return modal.present()
        },