Vue 3: v-for menunjukkan lebih banyak komponen daripada item

Question

Saya baru menggunakan Vue dan mencuba beberapa perkara. Saya juga menggunakan Ionic dan baru dalam hal ini juga. Saya mempunyai komponen saya sendiri dan saya mahu memaparkan setiap contoh perjalanan yang dikembalikan daripada API.

<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>

Daripada apa yang saya fahami daripada dokumentasi, saya kini boleh menggunakan onMounted untuk menetapkan data saya.

<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>

Sekarang, API saya mengembalikan tatasusunan yang mengandungi contoh perjalanan. Walau bagaimanapun, komponen dipaparkan lebih daripada sekali. Apa yang boleh menjadi sebab untuk ini?

Dalam dokumentasi saya menemui coretan kod berikut.

<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>

Perbezaan antara pelaksanaan saya dan dokumentasi nampaknya const list = ref([]) dan

Mengapa langkah tambahan ini? Apakah yang dilakukan oleh langkah tambahan ini? Ia tidak dijelaskan dalam dokumentasi dan saya tidak faham mengapa ini diperlukan.

Answer 1

ref="itemRefs" akan mengandungi semua <li> bukannya elemen senarai anda.

Ini dipanggil rujukan templat:

https://vuejs.org/guide/essentials/template-refs.html