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 } from "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 } 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>

我的实现与文档中的不同之处似乎在于const list = ref([])和

，而不是直接使用itemRefs。为什么会有这个额外的步骤？这个额外的步骤是做什么的？文档中没有解释，我不明白为什么需要这样做。

Answer 1

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

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

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