<p>Ich bin neu bei Vue und probiere ein paar Dinge aus. Ich benutze auch Ionic und bin auch neu in diesem Bereich. Ich habe meine eigene Komponente <trip.card> und möchte jede von der API zurückgegebene Reiseinstanz anzeigen. </p> <pre class="brush:php;toolbar:false;"><template> <ion-page> <ion-content :fullscreen="true"> <ion-header collap="configure"> <ion-toolbar> <ion-title size="large">Woadie – Ausflüge</ion-title> </ion-toolbar> </ion-header> <trip-card v-for="Reise in Reisen" ref="trips" :tripName="trip.name" /> </ion-content> </ion-page> </template></pre> <p>Soweit ich die Dokumentation verstanden habe, kann ich jetzt onMounted zum Festlegen meiner Daten verwenden. </p> <pre class="brush:php;toolbar:false;"><script setup lang="ts"> importieren { Ioneninhalt, IonHeader, IonPage, Ionentitel, IonToolbar, } von „@ionic/vue“; TripCard aus „./TripCard.vue“ importieren; Axios aus „axios“ importieren; import { ref, onMounted } from „vue“; const trip = ref([]); onMounted(() => { axios.get("http://localhost:8081/woadie/trips").then((response) => { trip.value = Response.data; }); }); </script></pre> <p>Im Moment gibt meine API ein Array zurück, das eine Trip-Instanz enthält. Allerdings wird die Komponente <trip-card> weitaus mehr als einmal angezeigt. Was könnte der Grund dafür sein? </p><p>In der Dokumentation habe ich den folgenden Codeausschnitt gefunden. </p><p><br /></p> <pre class="brush:php;toolbar:false;"><script setup> import { ref, onMounted } aus 'vue' const list = ref([ /* ... */ ]) const itemRefs = ref([]) onMounted(() => console.log(itemRefs.value)) </script> <Vorlage> <ul> <li v-for="item in list" ref="itemRefs"> {{ Artikel }} </li> </ul> </template></pre> <p>Der Unterschied zwischen meiner Implementierung und der Dokumentation scheint const list = ref([]) und <li v-for="item in list" ref="itemRefs"> zu sein, anstatt itemRefs direkt zu verwenden. Warum dieser zusätzliche Schritt? Was bewirkt dieser zusätzliche Schritt? Es wird in der Dokumentation nicht erklärt und ich verstehe nicht, warum dies erforderlich ist. </p>