J'ai une application VUE.JS qui récupère des données complexes de l'API avec Axios, puis visualisez ces données.
Mon code semble similaire à celui-ci: Alors je clique sur le bouton dans le modèle, ce bouton appelle Comment puis-je montrer à l'utilisateur quelle étape de traitement des données maintenant?
Peut-être que je devrais appeler la fonction i fini avec LOADDATA () code> fonction.
Cela fonctionne bien, mais la récupération de données prend un certain temps et le traitement prend également un peu de temps et de changement de temps et de variables uniquement lorsque la demande AxIOS est terminée. Donc, je ne vois que seulement
récupérer des données code> message mais pas
Données de processus code>. P>
processdata () code> dans
de regarder méthodes code>, mais cela semble survenir à moi. P>
Mise à jour h2>
settimeout () code> enveloppe. Voir ma réponse ci-dessous. P> p>
3 Réponses :
Vue a une fonction appelée Je pense que le code dans votre exemple ressemblerait à ceci: p> Je ne suis pas complètement sûr . Je travaille habituellement dans des environnements WebPack / compatibles Babel, auquel cas je voudrais simplement effectuer toute la fonction NextTick code>, qui est une fonction asynchrone qui signifie essentiellement "Effectuer le code suivant après la prochaine mise à jour visuelle". J'utilise généralement cette méthode si j'ai des mises à jour visuelles comme celle-ci pour faire.
async code> et écrire: p>
Merci, je pense que ce que j'ai besoin. Je vais tester votre option en quelques heures et retourner.
Malheureusement, votre approche ne m'a pas aidé. J'ai posté une réponse qui a une solution à mon problème. Mais honnêtement, je ne comprends pas tout à fait comment ça marche. Si vous avez des idées pourquoi cela est possible, je serai heureux si vous m'expliquez.
J'ai essayé d'utiliser J'ai donc décidé de compléter la question avec un exemple et a commencé à créer une démo sur Jsfiddle. Pour montrer le retard de rendu dont j'ai besoin, j'ai utilisé i a porté cette approche de mon code et tout a fonctionné parfaitement. Jusqu'à ce que j'ai essayé de supprimer ce Par conséquent, à la fin, j'ai fini par cette conception de code: p> Si quelqu'un comprend pourquoi ce comportement se produit, S'il vous plaît compléter ma réponse. p> p> nexttick () code>, comme @ joachim-bà ¸GGLILD m'a conseillé. J'ai même essayé d'utiliser
$ forcerUpdate () code> pour archier cet objectif. Mais pour une raison quelconque qui ne m'a pas clairement clair, l'effet dont j'avais besoin n'a été observé. La console a montré que la valeur a changé. Mais à l'écran et à Vue dévontools Les anciens résultats ont été montrés jusqu'à ce que la demande soit terminée.
settimeout (((((() => {this.loading = false}, 1000) code> et il n'y avait pas de problèmes de tout. P>
Settimeout () code>. Le problème se pose à nouveau. P>
Vous pouvez en lire ici ici ( https: // VUEJS. org / v2 / guide / réactival.html # async-update-file d'attente )
Pouvez-vous essayer de changer votre fonction comme suit: p>
Merci, mais cela ne fonctionne pas. J'ai fini par settimeout () code> enveloppe.