長時間休息後回到vue。在我的解決方案中,我使用合成 api,在創建組件後我需要獲取一些數據,以便稍後顯示它。在我目前的解決方案中,模板是在調用之前渲染的。可能是愚蠢的錯誤,但我仍然無法弄清楚(在 vue 2.0 中很清楚 - 創建()鉤子)。
<template> <div> <div class="row mb-2 border-top border-bottom" v-for="pizza in pizzas" :key="pizza"> <div class="col-sm-2"> <img alt="Vue logo" src="../assets/logo.png" style="height: 100px; width: 135px;"> </div> <div class="col-sm-2 mt-4"> {{pizza.name}} </div> <div class="col-md offset-md-2 mt-4"> price </div> <div class="col-sm-2 mt-4"> <button class="btn btn-primary" 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>
您的解決方案應該如您所願。您的 api 在創建元件時調用,而不是在元件渲染之後調用,因為它沒有在 onMounted 掛鉤中調用。此外,你應該讓披薩具有反應性。
Composition API 中可用的鉤子清單如下:
#與Options API的
建立
最接近的是在setup()
函數中執行程式碼。但是,為了避免使用v-if="pizzas"
保護模板,您應該將其實例化為空數組。而且,顯然,您希望它具有反應性,因此它是
ref([])
,而不僅僅是[]
。註解:
可以保持不變,因為我們將
pizzas
初始化為空數組。如果您以錯誤的方式啟動它,則需要在根包裝元素上設定v-if="pizzas"
保護。ref
需要為其指派.value