經過長時間的休息回到vue。在我的解決方案中，我使用了組合 API，一旦創建了組件，我需要在其中獲取一些資料，以便稍后顯示它。在我當前的解決方案中，模板是在呼叫之前呈現的。可能是愚蠢的錯誤，但我仍然無法弄清楚（在 vue 2.0 中很明顯 - created() 鉤子）。
<template>
<div>
<div v-for="pizza in pizzas" :key="pizza">
<div >
<img alt="如何在 vue 3 中創建的鉤子中進行 api 呼叫？" src="../assets/logo.png" style="height: 100px; width: 135px;">
</div>
<div >
{{pizza.name}}
</div>
<div >
price
</div>
<div >
<button type="submit">Add</button>
</div>
</div>
</div>
</template>
<script setup>
import {api} from "@/api.js"
let pizzas = null
const GetPizzas = async ()=>{
await api.get('pizza/pizzas/')
.then(response=>{
pizzas = response.data
})
}
GetPizzas()
</script>
uj5u.com熱心網友回復：
組合 API 中可用的鉤子串列在這里：
- https://vuejs.org/api/composition-api-lifecycle.html
最接近 Options API 的是在函式created中運行代碼。setup()但是，為了避免必須用 保護模板v-if="pizzas"，您應該將其實體化為一個空陣列。
而且，顯然，您希望它是反應性的，所以它是ref([])，而不僅僅是[]。
<script setup>
import { ref } from 'vue'
import { api } from '@/api.js'
const pizzas = ref([])
const GetPizzas = async () => {
await api.get('pizza/pizzas/').then((response) => {
pizzas.value = response.data
})
}
GetPizzas()
</script>
備注：
<template>可以保持不變，因為我們初始化pizzas為空陣列。如果您以任何虛假的方式啟動它，則需要v-if="pizzas"對根包裝器元素進行防護。refs 需要分配給他們的.value
uj5u.com熱心網友回復：
您的解決方案應該如您所愿。您的 api 在創建組件時呼叫，而不是在組件渲染后呼叫，因為它沒有在onMounted掛鉤中呼叫。此外，您應該使比薩餅具有反應性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507923.html
上一篇：通過打字稿中的所有物件屬性賦值