Vue3 <script setup> fetch 無法顯示資料

vue3 vite

adha9990 2022-01-27 03:13:12 ‧ 1160 瀏覽

分享至

新手請教:
我抓的到資料也能console.log出來想把資料放到網頁上但在網頁上無法顯示請問該怎麼解決?

<script setup>
  const response = await fetch("https://api.kcg.gov.tw/Api/Service/Get/9c8e1450-e833-499c-8320-29b36b7ace5c").then(res=>res.text());
  console.log(response);
</script>

<template>
  <div>{{ response }}</div>
</template>

<style scoped>

</style>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

cloudeasy

iT邦新手 5 級 ‧ 2022-01-27 03:28:05

最佳解答

在 script setup 裡面使用 await, 需要搭配 Suspense 使用
https://v3.vuejs.org/guide/migration/suspense.html#suspense

但 Suspense 還在實驗階段

可以改成

<script setup>
  import { ref } from 'vue'
  const response = ref('')
  fetch("https://api.kcg.gov.tw/Api/Service/Get/9c8e1450-e833-499c-8320-29b36b7ace5c").then(async res=> {
    response.value = await res.text()
  })
</script>

<template>
  <div>{{ response }}</div>
</template>

<style scoped>

</style>

或者寫在 hook

<script setup>
  import { ref, onBeforeMount } from 'vue'
  const response = ref('')
  onBeforeMount(async () => {
    response.value = await fetch("https://api.kcg.gov.tw/Api/Service/Get/9c8e1450-e833-499c-8320-29b36b7ace5c").then(async res=> res.text())
  })
  
</script>

<template>
  <div>{{ response }}</div>
</template>

<style scoped>

</style>

參考官方文件:
https://v3.vuejs.org/api/sfc-script-setup.html#reactivity