vue3 script setup下axios请求页面为空白

解决方法在Vue3中，如果当前组件的setup使用了async/await，那么其调用组件的父组件的外层需要嵌套一个suspense标签，原文地址代码//父组件app.vue<template><img alt="Vue logo" src="./assets/logo.png" /><suspense><HelloWorld msg="Hello Vue

红雾i

2615人浏览 · 2021-07-18 23:31:33

红雾i · 2021-07-18 23:31:33 发布

解决方法

在Vue3中，如果当前组件的setup使用了async/await，那么其调用组件的父组件的外层需要嵌套一个suspense标签，

原文地址

代码

//父组件app.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <suspense>
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  </suspense>
</template>
......





//helloworld.vue
<template>
  {{ result.data.id }}
</template>

<script setup lang="ts">
import axios from "axios";
interface result {
  id: Number;
}
const result = await axios.get<result>("/test");
</script>