Vue 3 : v-for affiche plus de composants que d'éléments

Question

Je suis nouveau sur Vue et j'essaie quelques choses. J'utilise également Ionic et je suis nouveau dans ce domaine également. J'ai mon propre composant et je souhaite afficher chaque instance de voyage renvoyée par l'API.

<template>
  <page-ion>
    <ion-content :fullscreen="true">
      <ion-header cliff="condense">
        <barre d'outils ionique>
          <ion-title size="large">Woadie - Voyages</ion-title>
        </barre d'outils ion>
      </en-tête-ion>
      <trip-card v-for="trip in trips" ref="trips" :tripName="trip.name" />
    </contenu ionique>
  </page-ion>
</template>

D'après ce que j'ai compris de la documentation, je peux désormais utiliser onMounted pour définir mes données.

<configuration du script lang="ts">
importer {
  Contenu Ion,
  IonHeader,
  Page Ion,
  Titre Ion,
  Barre d'outils Ion,
} de "@ionic/vue" ;
importer TripCard depuis "./TripCard.vue" ;
importer des axios depuis "axios" ;
importer { ref, onMounted } depuis "vue" ;
const voyages = ref([]);
onMounted(() => {
  axios.get("http://localhost:8081/woadie/trips").then((response) => {
    voyages.value = réponse.data;
  });
});
</script>

À l'heure actuelle, mon API renvoie un tableau contenant une instance de voyage. Cependant, le composant est affiché plusieurs fois. Quelle pourrait en être la raison?

Dans la documentation, j'ai trouvé l'extrait de code suivant.

<configuration du script>
importer { ref, onMounted } depuis 'vue'

const liste = réf([
  /* ... */
])

const itemRefs = réf([])

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

<modèle>
  <ul>
    <li v-for="élément de la liste" ref="itemRefs">
      {{ article }}
    ≪/li>
  </ul>
</template>

La différence entre mon implémentation et la documentation semble être const list = ref([]) et

au lieu d'utiliser directement itemRefs . Pourquoi cette étape supplémentaire ? A quoi sert cette étape supplémentaire ? Ce n'est pas expliqué dans la documentation et je ne comprends pas pourquoi cela est nécessaire.

Answer 1

ref="itemRefs" contiendra tous les <li> rendus par v-for. au lieu des éléments de votre liste.

C'est ce qu'on appelle une référence de modèle :

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