vuejs在模板中呈现异步函数会显示promise而不是返回的数据
vuejs在模板中呈现异步函数会显示promise而不是返回的数据
提问于 2019-03-01 16:25:23
我正在调用一个异步函数来加载配置文件图片，await调用如预期那样将值返回给变量'pf‘，但我无法从loadProfilePic返回该值。至少在开始的时候，我尝试返回一个静态字符串，在vue模板中显示为[object Promise]。
但是当我删除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']
},回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-01 16:32:05
这是因为async function返回原生promise，所以loadProfilePic方法实际上返回promise而不是值。你可以做的实际上是在obj中设置一个空的头像，然后在你的loadProfilePic方法中填充它。更新obj.profilePic时，VueJS将自动重新渲染。
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54940632
复制相关文章
相似问题
腾讯云开发者
