Kembali ke vue selepas berehat panjang. Dalam penyelesaian saya, saya menggunakan api komposisi dan selepas mencipta komponen saya perlu mendapatkan beberapa data supaya saya boleh memaparkannya kemudian. Dalam penyelesaian semasa saya, templat diberikan sebelum memanggil. Mungkin kesilapan bodoh tetapi saya masih tidak dapat memikirkannya (ia jelas dalam vue 2.0 - create() hook).
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Penyelesaian anda sepatutnya kelihatan seperti yang anda jangkakan. Api anda dipanggil apabila komponen dibuat, bukan selepas komponen dipaparkan, kerana ia tidak dipanggil dalam cangkuk onMounted. Juga, anda harus membuat pizza reaktif.
Senarai cangkuk yang terdapat dalam API Komposisi adalah seperti berikut:
Dengan templat
创建最接近的是在setup()函数中运行代码。但是，为了避免使用v-if="pizzas"dilindungi API Options, anda harus menjadikannya sebagai tatasusunan kosong.Dan, jelas sekali, anda mahu ia menjadi reaktif, jadi ia
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>Nota:
可以保持不变，因为我们将pizzas初始化为空数组。如果您以错误的方式启动它，则需要在根包装元素上设置v-if="pizzas"Perlindungan.ref需要为其分配.value