我想在从API获取或加载数据时,使用Skeleton代替轮播图的数据。为此,我正在尝试在我的Nuxtjs3页面中使用suspense。
但是我无法使其正常工作。
在下面的设置中,即使promise得到解决,也不会加载任何内容替换轮播图。如果我删除suspense,则可以正常工作。
这是我到目前为止所做的。
<template>
<div class="ttc-py-1 sm:ttc-py-5">
<div class="ttc-container ttc-mx-auto">
<SectionHeader :heading="`Activities near you`" />
<client-only>
<Carousel
:items-to-show="3.5"
:wrap-around="true"
:breakpoints="breakpoints"
>
<Suspense>
<Slide
v-for="(item, index) in preferredTours"
:key="index"
>
<CardsActivityCard
:city="item.city"
:country="item.country"
:image="`${item.image}`"
:packagename="item.package_name"
:price="item.price"
:uniqueid="item.uniqueId"
:slug="item.slug"
/>
</Slide>
<template #fallback>
<Slide v-for="i in 5" :key="i">
<div>loading ...... or Skeltons</div>
</Slide>
</template>
</Suspense>
</Carousel>
</client-only>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const { apiUrl } = useRuntimeConfig();
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
const [{ data: FavDests }, { data: preferredTours }] = await Promise.all([
useFetch(`${apiUrl}/dests/getpopulardests?country=${userCountry}`,
{ key: "cQsyfYspDP2zM1xMe0YY9Gfv4CgQByAd" }
),
useFetch(
`${apiUrl}/tours/getpopulartours?country=${userCountry}&usercurrency=${userCurrency}`,
{ key: "Z1rvmHPxAOLvt68WZZq2BUNsHQ8I213Y" }
),
]);
</script>