<p>Saya baru menggunakan Vue dan mencuba beberapa perkara. Saya juga menggunakan Ionic dan baru dalam hal ini juga. Saya mempunyai komponen saya sendiri <trip.card> dan saya mahu memaparkan setiap contoh perjalanan yang dikembalikan daripada API. </p> <pre class="brush:php;toolbar:false;"><template> <halaman-ion> <ion-content :fullscreen="true"> <ion-header collapse="condense"> <bar alat ion> <ion-title size="large">Woadie - Trips</ion-title> </ion-toolbar> </ion-header> <trip-card v-for="trip dalam perjalanan" ref="trips" :tripName="trip.name" /> </ion-content> </ion-page> </template></pre> <p>Daripada apa yang saya fahami daripada dokumentasi, saya kini boleh menggunakan onMounted untuk menetapkan data saya. </p> <pre class="brush:php;toolbar:false;"><script setup lang="ts"> import { Kandungan Ion, IonHeader, Halaman Ion, IonTitle, IonToolbar, } daripada "@ionic/vue"; import TripCard daripada "./TripCard.vue"; import axios daripada "axios"; import { ref, onMounted } daripada "vue"; perjalanan const = ref([]); onMounted(() => { axios.get("http://localhost:8081/woadie/trips").then((respons) => { trips.value = respons.data; }); }); </script></pre> <p>Sekarang, API saya mengembalikan tatasusunan yang mengandungi contoh perjalanan. Walau bagaimanapun, komponen <trip-card> dipaparkan lebih daripada sekali. Apa yang boleh menjadi sebab untuk ini? </p><p>Dalam dokumentasi saya menemui coretan kod berikut. </p><p><br /></p> <pre class="brush:php;toolbar:false;"><setup script> import { ref, onMounted } daripada 'vue' senarai const = ref([ /* ... */ ]) const itemRefs = ref([]) onMounted(() => console.log(itemRefs.value)) </skrip> <template> <ul> <li v-for="item in list" ref="itemRefs"> {{ item }} </li> </ul> </template></pre> <p>Perbezaan antara pelaksanaan saya dan dokumentasi nampaknya const list = ref([]) dan <li v-for="item in list" ref="itemRefs"> Mengapa langkah tambahan ini? Apakah yang dilakukan oleh langkah tambahan ini? Ia tidak dijelaskan dalam dokumentasi dan saya tidak faham mengapa ini diperlukan. </p>