vuejs рендеринг асинхронной функции в шаблоне отображает обещание вместо возвращаемых данных

Question

Я вызываю асинхронную функцию, которая загружает изображение профиля, вызов await возвращает значение в переменную 'pf', как и ожидалось, но я не смог вернуть это из loadProfilePic.По крайней мере, для начала я попытался вернуть статическую строку, которая будет отображаться как [object Promise] в шаблоне vue.

Но когда я удаляю await / asnyc, он возвращает строку.

<div  v-for="i in obj">
              {{ loadProfilePic(i.id) }}
</div>

   loadProfilePic: async function(id) {
           var pf = await this.blockstack.lookupProfile(id)
           return 'test data';
           //return pf.image[0]['contentUrl']

    },

Answer 1

Это потому, что async function возвращает собственное обещание, поэтому метод loadProfilePic на самом деле возвращает обещание вместо значения.Вместо этого вы можете установить пустое изображение профиля в obj, а затем заполнить его методом loadProfilePic.VueJS автоматически выполнит повторную визуализацию при обновлении obj.profilePic.

<div  v-for="i in obj">
    {{ i.profilePic }}
</div>

loadProfilePic: async function(id) {
   var pf = await this.blockstack.lookupProfile(id);

   this.obj.filter(o => o.id).forEach(o => o.profilePic = pf);
}

См. Подтверждение концепции ниже:

new Vue({
  el: '#app',
  data: {
    obj: [{
      id: 1,
      profilePic: null
    },
    {
      id: 2,
      profilePic: null
    },
    {
      id: 3,
      profilePic: null
    }]
  },
  methods: {
    loadProfilePic: async function(id) {
      var pf = await this.dummyFetch(id);
      this.obj.filter(o => o.id === id).forEach(o => o.profilePic = pf.name);
    },
    dummyFetch: async function(id) {
      return await fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then(r => r.json());
    }
  },
  mounted: function() {
    this.obj.forEach(o => this.loadProfilePic(o.id));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="i in obj">
    {{ i.profilePic }}
  </div>
</div>