Vue.js 模板函数返回 '[object Promise]' 问题及解决之道

2024-03-26 05:00:13

## Vue.js 模板中函数返回 "[object Promise]" 的问题与解决方案

什么是问题？

当你尝试在 Vue.js 模板中调用一个返回 Promise 的函数时，你可能会看到它渲染 "[object Promise]" 而不是函数的最终结果。这是因为 Vue.js 无法在模板渲染时等待 Promise 解析。

原因

Vue.js 模板是使用虚拟 DOM 渲染的，虚拟 DOM 是一棵树形结构，代表了 UI 的当前状态。当一个函数返回一个 Promise 时，Vue.js 无法在模板渲染时等待 Promise 解析完成，因此它渲染了 Promise 本身。

解决方案

1. 使用 v-if 等待 Promise 解析

你可以使用 v-if 指令来等待 Promise 解析完成，然后根据结果渲染模板。例如：

<div v-if="isAssigned(detail.issues.id) === true">
  <span class="text-success">Assigned</span>
</div>
<div v-else>
  <span class="text-danger">Not Assigned</span>
</div>

2. 使用 computed 属性

Vue.js 提供了 computed 属性，允许你在模板中使用异步函数。例如：

// 在组件中定义 computed 属性
computed: {
  isAssigned() {
    return this.isAssigned(detail.issues.id);
  },
},

<!-- 在模板中使用 computed 属性 -->
<div v-if="isAssigned === true">
  <span class="text-success">Assigned</span>
</div>
<div v-else>
  <span class="text-danger">Not Assigned</span>
</div>