Vue 3: v-for顯示的元件多於項目

Question

我剛接觸Vue並且正在嘗試一些東西。我也在使用Ionic，對此也是新手。我有自己的元件，我希望將每個從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>

根據我從文件中了解到的，我現在可以使用onMounted來設定我的資料。

<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 } 從 "vue";
const trips = ref([]);
onMounted(() => {
  axios.get("http://localhost:8081/woadie/trips").then((response) => {
    trips.value = response.data;
  });
});
</script>

現在，我的API傳回一個包含一個行程實例的陣列。然而，組件的顯示次數遠超過一次。這可能是什麼原因呢？

在文件中，我找到了以下程式碼片段。

<script setup>
import { ref, onMounted } 從 '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>

我的實作與文件中的不同之處似乎在於const list = ref([])和

，而不是直接使用itemRefs 。為什麼會有這個額外的步驟？這個額外的步驟是做什麼的？文件中沒有解釋，我不明白為什麼需要這樣做。

Answer 1

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

這被稱為模板參考（template ref）：

#

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

#