Seeking guidance on the optimal approach for this task. I need to invoke a method within a v-for loop that lazily loads data from a related model. Can anyone advise on the best practice for achieving this?
<div v-for="speaker in allSpeaker" :key="speaker.id" class="d-sm-flex mt-8 align-start">
// calling the method here
{{ const programs = await speaker.getPrograms() }}
<li v-for="program in programs"...
/// potentially not the best practice!
<v-img
v-if="!!speaker.image"
class="white--text mx-auto mr-sm-3 ml-sm-0 mb-5 mb-sm-0"
aspect-ratio="1"
:src="speaker.image"
:srcset="speaker.image.set"
/>
<div v-else class="image-replacer mx-auto mr-sm-3 ml-sm-0 mb-5 mb-sm-0"> </div>
<div>
<div class="">
<p>{{speaker.firstname + ' ' + speaker.lastname}}</p>
<p>{{speaker.organisation}}</p>
</div>
<div class="py-4">{{speaker.description}}</div>
</div>
I have outlined my requirement above and welcome any advice on the best practices to follow.