Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
I have a list of sessions organized in an accordion (title visible, content hidden).
When I click on a title, the content of the session appears in the accordion.
In the content, I'd like to add a select field to quickly change the state of the session. It is easy to do, but I have a problem.
The select field is reproduced as many times as the number of sessions. And more the number of sessions, more the time to load the datas in the select field is long. If I wait for a minute to display the content of a session, I see the select field as I need. If I don't wait for a minute and display a session as soon as the list is loaded, the select field only show the id (foreign key) and I have to wait for a minute to see the label of the option.
So I thought about loading the select field only when I click on the title to display the content. So the loading would be quicker.
My select field is a component which is in another component.
How is it possible to tell VueJS to load this component only when I display the content of the accordion item ?
I really have no idea about how to do that.
Thanks for your help.
Vincent
Could you share the components in question? It would help us get a better understanding of the issue.
But based on what you've said so far, I assume there's a click handler somewhere that handles opening/closing the accordion. Hooking onto that would be your best approach and then calling whatever API endpoint you need whenever the accordion is being opened.
@jorgensolli Here is my code ;).
Parent component
<el-card>
<div class="card-header">
<h3>Statistiques sur les sessions</h3>
<el-button @click="openDialogSession()" type="primary">Créer une nouvelle session</el-button>
</div>
<div class="mf-tag-group">
<el-tag class="mf-tag" size="large" v-for="stat in stats" :value="stat.count" :style="{ backgroundColor: stat.color, color: 'white' }">
{{ stat.label }} {{ stat.count }}
</el-tag>
</div>
</el-card>
<el-card>
<el-collapse>
<el-collapse-item v-for="session in sessions" :key="session.id" :name="session.id">
<template #title>
<div class="title" :style="{ color: session.state_color }">{{ session.type + ' - ' + session.date_format_fr + ' - Projet ' + session.project_number }}</div>
</template>
<session-sheet :session="session"></session-sheet>
</el-collapse-item>
</el-collapse>
</el-card>
Child component
<div v-if="!updateMode">
<el-row justify="space-between">
<div class="button-group">
<el-button @click="openDialogSession(session.id)">Editer la session</el-button>
<el-button @click="editReview()">Editer le bilan</el-button>
</div>
<!--<states-select v-model="session.state_id"></states-select>-->
</el-row>
<div class="review-content" v-html="session.review"></div>
</div>
<div v-else>
<div class="button-group">
<el-button @click="openDialogSession(session.id)">Editer la session</el-button>
<el-button @click="saveReview()">Enregistrer</el-button>
<el-button @click="cancel()">Annuler</el-button>
</div>
<div class="review-content">
<ckeditor
v-model="session.review"
:editor="editor"
:config="editorConfig">
</ckeditor>
</div>
</div>
The select field is in comment (<states-select v-model="session.state_id"></states-select>) waiting for a solution.
According to your answer, how is it possible to tell VueJS not loading a component if it is not visible ?
@vincent15000 My implementation would look something like this element-plus.run example
It's not super pretty, because Element Plus (which I assume you're using) doesnt tell you when you open a specific item, so you need to calculate it yourself.
@jorgensolli Yes I'm using Element-Plus ... your proposition looks great. That's ok for me ;). Thank you very much.
Please or to participate in this conversation.