vue2.js项目:这段总是显示[object Promise]:<div v-for="(item, index) in ownerList" :key="index" style="margin-top: 5px;"> <h6>{{ getName(item[0]) }}</h6> <h6>占比:{{ item[1] }}%</h6> </div>。methods里有个函数:async getName(a) { try { const res = await authApi.getByAccount({ account: a }); return res; } catch (error) { console.error(error); return null; } }。能帮我看一下为什么显示出来不对吗吗
时间: 2024-02-09 14:10:22 浏览: 22
这是因为在模板中使用了一个异步函数 `getName`,该函数返回一个 Promise 对象。因此,在模板中显示的是 Promise 对象的字符串形式 `[object Promise]`。
要解决这个问题,可以在 `getName` 函数中添加一个 `await`,等待异步请求完成并返回数据后再进行渲染。修改后的代码如下:
```
async getName(a) {
try {
const res = await authApi.getByAccount({ account: a });
return res.data.name; // 返回名称
} catch (error) {
console.error(error);
return null;
}
}
```
在模板中,我们可以使用 `v-if` 判断异步请求是否完成,然后再显示数据。修改后的代码如下:
```
<div v-for="(item, index) in ownerList" :key="index" style="margin-top: 5px;">
<template v-if="getName(item[0]) !== null"> <!-- 判断是否完成 -->
<h6>{{ getName(item[0]) }}</h6>
</template>
<h6>占比:{{ item[1] }}%</h6>
</div>
```
注意:在模板中不能直接使用 `await`,需要使用 `v-if` 判断异步请求是否完成。