Para explicar mi problema, me gustaría en mi aplicación que cuando el usuario haga clic en mi componente principal, abra un menú fuera del lienzo con los detalles del componente principal. Para esto, paso un objeto generando mi componente secundario en un v-for pero cuando hago clic en el elemento principal, solo obtengo el primer objeto de mi matriz. ¿Cómo puedo obtener el objeto correcto para el padre en el que hago clic?

Componente principal:

 <div v-if="missions"> <div v-for="mission in missions" :key="mission._id"> <div id="mission-box" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-mission" aria-controls="offcanvas-mission"> <div id="mission-title"> <span style="margin-left: 10px"><strong>{{ mission.libelle }}</strong></span> </div> </div> <MissionMenuModal :mission="mission"/> </div> </div>

Componente hijo:

 <template> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-mission" aria-labelledby="offcanvas-mission"> <div class="offcanvas-header"> <div class="d-inline-flex"> <h5 class="m-auto"><b>{{ mission.libelle.toUpperCase() }}</b></h5> </div> <div class="float-end"> <font-awesome-icon icon="ellipsis-h"/> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> </div> <div> <p><strong>Dates / Délai</strong> {{ convertJsDate(mission.dateDebut) + " - " + convertJsDate(mission.dateFin) + " / " + mission.delai + " jours" }} </p> </div> </div> </template> <script> export default { name: "MissionMenuModalV2", props: { mission: { type: Object, default: () => ({}), } }, methods: { convertJsDate(dateFormat) { if (dateFormat !== undefined) { let date = new Date(dateFormat), month = '' + (date.getMonth() + 1), day = '' + date.getDate(), year = date.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [day, month, year].join('.'); } }, }, } </script>