<p>저는 Vue를 처음 접했고 몇 가지를 시도하고 있습니다. 나는 또한 Ionic을 사용하고 있으며 이것 역시 새로운 것입니다. 내 구성요소 <trip.card>가 있고 API에서 반환된 각 여행 인스턴스를 표시하려고 합니다. </p> <pre class="brush:php;toolbar:false;"><템플릿> <이온 페이지> <ion-content :fullscreen="true"> <ion-headercollapse="응축"> <ion-toolbar> <ion-title size="large">Woadie - 여행</ion-title> </ion-toolbar> </이온 헤더> <trip-card v-for="trip in trips" ref="trips" :tripName="trip.name" /> </이온 함량> </ion-page> </템플릿></pre> <p>문서에서 제가 이해한 바에 따르면 이제 onMounted를 사용하여 데이터를 설정할 수 있습니다. </p> <pre class="brush:php;toolbar:false;"><스크립트 설정 lang="ts"> 수입 { 이온컨텐츠, 이온헤더, 이온페이지, 이온제목, 이온툴바, } "@ionic/vue"에서; "./TripCard.vue"에서 TripCard를 가져옵니다. "axios"에서 axios를 가져옵니다. "vue"에서 import { ref, onMounted }; const 여행 = ref([]); onMounted(() => { axios.get("http://localhost:8081/woadie/trips").then((응답) => { trips.value = 응답.데이터; }); }); <p>현재 내 API는 여행 인스턴스가 포함된 배열을 반환합니다. 그러나 <trip-card> 구성요소는 두 번 이상 표시됩니다. 그 이유는 무엇입니까? </p><p>문서에서 다음 코드 조각을 찾았습니다.

<pre class="brush:php;toolbar:false;"><스크립트 설정> 'vue'에서 { ref, onMounted } 가져오기 const 목록 = ref([ /* ... */ ]) const itemRefs = ref([]) onMounted(() => console.log(itemRefs.value)) </스크립트> <템플릿>

<li v-for="목록의 항목" ref="itemRefs"> {{ 안건 }} </li> </ul> </템플릿></pre> <p>내 구현과 문서의 차이점은 itemRefs를 직접 사용하는 대신 const list = ref([]) 및 <li v-for="item in list" ref="itemRefs">인 것 같습니다. 이 추가 단계를 수행하는 이유는 무엇입니까? 이 추가 단계는 무엇을 합니까? 문서에는 설명되어 있지 않으며 이것이 왜 필요한지 이해하지 못합니다. </p>