Nuxt3 生成 - 预渲染时等待异步数据

Question

<template>
    <article class="post" v-if="post">
        <section
            v-html="post.content"
        ></section>
    </article>
</template>
<script setup lang="ts">
const route = useRoute();
const post = await $fetch(`/api/post/${route.params.handle}`).catch(() => {});
</script>

我希望

npm run generate

等待

$fetch

，以便

post.content

将在 HTML 中呈现，而不是在加载后添加到页面。我一生都想不出任何方法来做到这一点。还可能吗？

Answer 1

您可以使用 Vue 的反应系统在内容可用时有条件地渲染内容。

  <article class="post" v-if="post">
    <section v-if="post.content" v-html="post.content"></section>
  </article>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';

const route = useRoute();
const post = ref(null);

(async () => {
  try {
    const response = await $fetch(`/api/post/${route.params.handle}`);
    post.value = response.data; // Assuming your data is in response.data
  } catch (error) {
    console.error(error);
  }
})();
</script>