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
class="lesson-card"
v-for="lesson in lesson.video_lessons"
:key="lesson"
>
<div class="lesson-content">
<h2>{{ lesson.content_description }}</h2>
<div class="tags">
<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 class="sidebar-icons">
<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()
},
>Solution :
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()
},