<p>我剛接觸Vue並且正在嘗試一些東西。我也在使用Ionic，對此也是新手。我有自己的元件<trip.card>，我希望將每個從API傳回的行程實例顯示出來。 </p> <pre class="brush:php;toolbar:false;"><template> <ion-page> <ion-content :fullscreen="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Woadie - Trips</ion-title> </ion-toolbar> </ion-header> <trip-card v-for="trip in trips" ref="trips" :tripName="trip.name" /> </ion-content> </ion-page> </template></pre> <p>根據我從文件中了解到的，我現在可以使用onMounted來設定我的資料。 </p> <pre class="brush:php;toolbar:false;"><script setup lang="ts"> import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, } from "@ionic/vue"; import TripCard from "./TripCard.vue"; import axios from "axios"; import { ref, onMounted } 從 "vue"; const trips = ref([]); onMounted(() => { axios.get("http://localhost:8081/woadie/trips").then((response) => { trips.value = response.data; }); }); </script></pre> <p>現在，我的API傳回一個包含一個行程實例的陣列。然而，<trip-card>組件的顯示次數遠超過一次。這可能是什麼原因呢？ </p><p>在文件中，我找到了以下程式碼片段。 </p><p><br /></p> <pre class="brush:php;toolbar:false;"><script setup> import { ref, onMounted } 從 'vue' const list = ref([ /* ... */ ]) const itemRefs = ref([]) onMounted(() => console.log(itemRefs.value)) </script> <template> <ul> <li v-for="item in list" ref="itemRefs"> {{ item }} </li> </ul> </template></pre> <p>我的實作與文件中的不同之處似乎在於const list = ref([])和<li v-for="item in list" ref="itemRefs">，而不是直接使用itemRefs 。為什麼會有這個額外的步驟？這個額外的步驟是做什麼的？文件中沒有解釋，我不明白為什麼需要這樣做。 </p>