首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >vuejs在模板中呈现异步函数会显示promise而不是返回的数据

vuejs在模板中呈现异步函数会显示promise而不是返回的数据
EN

Stack Overflow用户
提问于 2019-03-01 16:25:23
回答 1查看 7K关注 0票数 6

我正在调用一个异步函数来加载配置文件图片,await调用如预期那样将值返回给变量'pf‘,但我无法从loadProfilePic返回该值。至少在开始的时候,我尝试返回一个静态字符串,在vue模板中显示为[object Promise]

但是当我删除await/asnyc时,它会返回字符串。

代码语言:javascript
复制
<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']

    },
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-01 16:32:05

这是因为async function返回原生promise,所以loadProfilePic方法实际上返回promise而不是值。你可以做的实际上是在obj中设置一个空的头像,然后在你的loadProfilePic方法中填充它。更新obj.profilePic时,VueJS将自动重新渲染。

代码语言:javascript
复制
<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);
}

请参阅下面的概念验证:

代码语言:javascript
复制
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));
  }
});
代码语言:javascript
复制
<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>

票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54940632

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档