Async and await in Vuejs Async and await in Vuejs vue.js vue.js

Async and await in Vuejs


Vue can't resolve promises in properties so you have to do something like this.

Template

<div v-for="post of posts">  ...  <img :src="post.profilePicture" />  ...

JavaScript

export default {  created() {    this.posts = ...    await Promise.all(this.posts.map(async post => {      post.profilePicture = await this.getUserPicturePath(post.name);    }));  }}


you can maybe go with

<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                })                        },           }