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-01-20 22:04:46 浏览: 61
你的代码中,`getName` 方法返回了一个 Promise 对象,而在模板中直接使用这个 Promise 对象,会导致渲染出来的是 `[object Promise]` 字符串。为了正确显示 `getName` 方法的返回值,你可以使用 `computed` 计算属性来调用 `getName` 方法,并将返回值存储在计算属性中。然后,在模板中使用计算属性的值来显示数据。
修改后的代码如下:
```
<template>
<div v-for="(item, index) in ownerList" :key="index" style="margin-top: 5px;">
<h6>{{ getOwnerName(item[0]) }}</h6>
<h6>占比:{{ item[1] }}%</h6>
</div>
</template>
<script>
export default {
data() {
return {
ownerList: [
['a', 30],
['b', 70]
]
}
},
computed: {
ownerNames() {
return this.ownerList.map(item => {
return {
name: '',
percent: item[1]
}
})
}
},
methods: {
async getName(a) {
try {
const res = await authApi.getByAccount({ account: a });
return res;
} catch (error) {
console.error(error);
return null;
}
},
async getOwnerName(a) {
const name = await this.getName(a)
return name || '未知'
}
}
}
</script>
```
这样,你就可以正确地显示 `getName` 方法的返回值了。