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

【问题标题】：VueJS: Show content of PromiseResult that is returned from computed propertyVueJS：显示从计算属性返回的 PromiseResult 的内容
【发布时间】：2021-01-22 01:30:14
【问题描述】：

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

我对@987654327@ 很满意，但是，当我需要在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;
    },

【问题讨论】：

标签： javascript vue.js promise computed-properties

【解决方案1】：

这是一个反模式，你想如何做到这一点。 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>

【讨论】：