Vue 3: v-for shows more components than items

Question

I'm new to Vue and trying out a few things. I'm also using Ionic and new to this too. I have my own component and I want to display each trip instance returned from the API.

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Woadie - Trips</ion-title>
        </ion-toolbar>
      </ion-header>
      <trip-card v-for="trip in trips" ref="trips" :tripName="trip.name" />
    </ion-content>
  </ion-page>
</template>

From what I understand from the documentation, I can now use onMounted to set my data.

<script setup lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";
import TripCard from "./TripCard.vue";
import axios from "axios";
import { ref, onMounted } from "vue";
const trips = ref([]);
onMounted(() => {
  axios.get("http://localhost:8081/woadie/trips").then((response) => {
    trips.value = response.data;
  });
});
</script>

Right now, my API returns an array containing a trip instance. However, the component is displayed far more than once. What could be the reason for this?

In the documentation I found the following code snippet.

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

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

const itemRefs = ref([])

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

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

The difference between my implementation and the documentation seems to be const list = ref([]) and

instead of using itemRefs directly . Why this extra step? What does this extra step do? It's not explained in the documentation and I don't understand why this is needed.

Answer 1

ref="itemRefs" will contain all <li> rendered by v-for. instead of your list elements.

This is called a template ref:

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