Vue 3: v-for zeigt mehr Komponenten als Elemente

Question

Ich bin neu bei Vue und probiere ein paar Dinge aus. Ich benutze auch Ionic und bin auch neu in diesem Bereich. Ich habe meine eigene Komponente und möchte jede von der API zurückgegebene Reiseinstanz anzeigen.

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <ion-header collap="configure">
        <ion-toolbar>
          <ion-title size="large">Woadie – Ausflüge</ion-title>
        </ion-toolbar>
      </ion-header>
      <trip-card v-for="Reise in Reisen" ref="trips" :tripName="trip.name" />
    </ion-content>
  </ion-page>
</template>

Soweit ich die Dokumentation verstanden habe, kann ich jetzt onMounted zum Festlegen meiner Daten verwenden.

<script setup lang="ts">
importieren {
  Ioneninhalt,
  IonHeader,
  IonPage,
  Ionentitel,
  IonToolbar,
} von „@ionic/vue“;
TripCard aus „./TripCard.vue“ importieren;
Axios aus „axios“ importieren;
import { ref, onMounted } from „vue“;
const trip = ref([]);
onMounted(() => {
  axios.get("http://localhost:8081/woadie/trips").then((response) => {
    trip.value = Response.data;
  });
});
</script>

Im Moment gibt meine API ein Array zurück, das eine Trip-Instanz enthält. Allerdings wird die Komponente weitaus mehr als einmal angezeigt. Was könnte der Grund dafür sein?

In der Dokumentation habe ich den folgenden Codeausschnitt gefunden.

<script setup>
import { ref, onMounted } aus 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<Vorlage>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ Artikel }}
    </li>
  </ul>
</template>

Der Unterschied zwischen meiner Implementierung und der Dokumentation scheint const list = ref([]) und

zu sein, anstatt itemRefs direkt zu verwenden. Warum dieser zusätzliche Schritt? Was bewirkt dieser zusätzliche Schritt? Es wird in der Dokumentation nicht erklärt und ich verstehe nicht, warum dies erforderlich ist.

Answer 1

ref="itemRefs"将包含由v-for渲染的所有<li>。而不是您的列表元素。

这被称为模板引用（template ref）：

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