web-dev-qa-db-fra.com

Pourquoi j'ai été vide lors de l'utilisation d'Async Configuration () dans VUE3

problème

J'utilise Async Configuration () dans Vue3, mais j'ai eu mon HTML disparaître, mon modèle de composant n'entraînez pas à HTML, mais lorsque je supprimai le préfixe ASYNC et attend votre préfixe, mon HTML reviendra, est-ce que quelqu'un a le même problème comme celui-ci

  async setup () {
   const data = ref(null)
   try {
    const res = await fetch('api')
    data.value = res.json()
   } catch (e) {
    console.error(e)
   }
  return {
   data
  }
}

j'ai essayé

  1. je vérifie la récupération, elle renvoie une réponse correcte
  2. j'ai essayé <Suspense> tag, toujours même problème
vue.jsvue-componentvuejs3vue-composition-api
6
g6165310

Votre composant async setup() _ a l'air bien que la fonction manquante await res.json(), qui ne causerait toujours pas le problème que vous voyez. Je soupçonne que votre usage de <Suspense> est incorrect.

Pour utiliser async setup() Dans un composant, le composant parent doit utiliser ce composant dans une balise <Suspense>:

<!-- Parent.vue -->
<template>
 <Suspense>
   <MyAsyncComponent />
 </Suspense>
</template>

Vous pouvez également utiliser les emplacements default et fallback<Suspense> pour afficher un indicateur de chargement en attendant que la configuration du composant enfant puisse résoudre:

<!-- Parent.vue -->
<template>
 <Suspense>
   <template #default>
     <MyAsyncComponent />
   </template>
   <template #fallback>
     <span>Loading...</span>
   </template>
 </Suspense>
</template>

Vérifié avec [email protected], Node 14, Chrome 84, macos catalina. Notez que <Suspense> est toujours expérimental et que l'API est toujours expérimental.

démo

2
tony19