Vue 3: v-for는 항목보다 더 많은 구성요소를 표시합니다.
<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>
