如何正确使用Nuxtjs中的悬念

Question

我想在从API中获取或加载数据时使用skelton来代替carousel的数据，为此，我试图在我的Nuxtjs3页面中使用悬念。

但我无法让它发挥作用。

在下面的设置中，我没有得到任何东西来代替旋转木马。它的空白，即使承诺得到解决，如果我消除悬念，那么它运行良好。

这是我迄今所做的。

    <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>

Answer 1

如果您需要ClientOnly，还应该为此指定一个占位符：

    <ClientOnly>
      <Suspense>
        <MyFancyComponent />
        <template #fallback>
            <LoadingScreen />
        </template>
      </Suspense>
      <template #placeholder>
        <LoadingScreen />
      </template>
    </ClientOnly>