recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment effectuer un appel API dans le hook créé dans Vue 3 ?

Retour en vue après une longue pause. Dans ma solution, j'utilise l'API de composition et après avoir créé le composant, j'ai besoin d'obtenir des données pour pouvoir les afficher plus tard. Dans ma solution actuelle, le modèle est rendu avant l'appel. Erreur probablement stupide mais je n'arrive toujours pas à la comprendre (c'est clair dans vue 2.0 - hook create()).

<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粉744691205P粉744691205416 Il y a quelques jours653

répondre à tous(2)je répondrai

  • P粉509383150

    P粉5093831502023-11-05 00:15:26

    Votre solution devrait ressembler à ce à quoi vous vous attendiez. Votre API est appelée lorsque le composant est créé, pas après le rendu du composant, car elle n'est pas appelée dans le hook onMounted. De plus, vous devez rendre la pizza réactive.

    répondre
    0
  • P粉004287665

    P粉0042876652023-11-05 00:12:20

    La liste des hooks disponibles dans l'API Composition est la suivante :

    Avec le modèle protégé 创建最接近的是在setup()函数中运行代码。但是,为了避免使用 v-if="pizzas" de l'API Options, vous devez l'instancier sous la forme d'un tableau vide.

    Et, évidemment, vous voulez qu'il soit réactif, alors c'est le cas 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>
    

    Remarques :