VueJS：显示从计算 属性 返回的 PromiseResult 的内容

Question

我计算了 属性，如下所示 returns res，其中 res 是一个 Promise 对象。我无法在 created() 或 mounted() 挂钩中包含此脚本的原因是，当我这样做时 this.selectedObject 是 null。

我对 res 很满意，但是，当我需要在 html 中渲染 PromiseResult 时，问题就来了：<div>{{ currentDepStatus }}</div>。这显示 [Promise object] 而不是 PromiseResult 的内容。任何帮助将不胜感激。

  computed: {
    currentDepStatus() {
      let res = '';
      if (!this.selectedObject) return [];
      const deps = this.depCategory(this.selectedObject.id);
      if (deps.length > 0) {
        res = sendDepStatus(deps);
      }
      return res;
    },

Answer 1

这是一个 anti-pattern 说明您想要如何做到这一点。 computed 属性需要简单 getters 才能嵌套反应值。任何外部操作都应在 methods

内

看到你的问题后，我将按照以下方式解决。

data() {
  currentDepStatus: []
}
watch: {
 async selectedObject() {
   if (this.selectedObject) {
      const deps = this.depCategory(this.selectedObject.id);
      if (deps.length > 0) {
        this.currentDepStatus = await sendDepStatus(deps);
      }
    }
  }
}

<div>{{ currentDepStatus }}</div>