在Vue 3中如何在created鉤子中進行API呼叫?
P粉744691205
P粉744691205 2023-11-04 08:48:38
0
2
611

長時間休息後回到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>


#
P粉744691205
P粉744691205

全部回覆(2)
P粉509383150

您的解決方案應該如您所願。您的 api 在創建元件時調用,而不是在元件渲染之後調用,因為它沒有在 onMounted 掛鉤中調用。此外,你應該讓披薩具有反應性。

P粉004287665

Composition API 中可用的鉤子清單如下:

#與Options API的建立最接近的是在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>

註解

  • 可以保持不變,因為我們將 pizzas 初始化為空數組。如果您以錯誤的方式啟動它,則需要在根包裝元素上設定 v-if="pizzas" 保護。
  • ref 需要為其指派 .value
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!