Rest – asynchronous and wait in vuejs
•
Java
I can't use vuejs, Axios, async / await and promise (?) Retrieve data from the rest - API
<template> <div> <div v-if="posts && posts.length"> <div v-for="post of posts"> {{post.name}} <img :src="getUserPicturePath(post.name)" /> </div> </div> </div> </template>
On the other hand, as you can see, a method using Axios is being called between V - for
<script> import axios from 'axios' export default { data: () => { posts: [] } created() { // a method to fill up the post-array },methods: { async getUserPicturePath(name){ const response = await axios.get('linkToApi'+name) console.dir(response.data.profilePicture.path) return response.data.profilePicture.path } } } </script>
console. Dir (response. Data. Profilepicture. Path) – part gives the correct path of profilepicture, but < img: SRC = "getuserpicturepath (post. Name)" / > writes [object promise] on < template >
What advice do you have? How can I go this way?
Solution
Maybe you can go
<template> ... <img :src="img_path" v-if="img_path"> ... </template> <script> ... data() { ... img_path: "",img: "userImg.png" } // or however you wish to pass user image and trigger loading create() { this.getUserPicturePath(this.img) },methods: { getUserPicturePath(name){ axios.get('getImage/'+name) .then(response => { this.img_path = response.data.path console.dir(response.data.path) }) .catch(error =>{ // ... error }) },}
The content of this article comes from the network collection of netizens. It is used as a learning reference. The copyright belongs to the original author.
THE END
二维码