javascript - vuejs在模板中渲染异步函数显示promise而不是返回数据
问题描述
我正在调用一个加载配置文件图片的异步函数,等待调用按预期将值返回给变量“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']
},
解决方案
那是因为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>
推荐阅读
- r - 如何根据 R 中有效值(NA 除外)的数量选择数据框中的某些列?
- php - 如何使用 strpos 找到完全匹配?
- javascript - 运行 gatsby develop 时 gatsby 发现预设“react”时出错
- python - 熊猫(键,值)数据,将键值的重复实例移动到新列中
- c++ - 在 R 中安装“RcppArmadillo”包时出错
- angular - 如何在 Angular 模块中嵌入 mat-icon svg 图标源(没有额外的 Http 请求)
- android - 如何修复 Android Studio 中的 Lottie 错误 - 'Error:Execution failed for task' java.lang.RuntimeException [...] 无法合并 dex
- javascript - 解压缩 Content-Encoding: gzip with javascript/node
- angular - 不在 Angular 6 测试中模拟 HttpClient
- asp.net - 我的数据库是否应该被 REST API 公开