VueJS: показать содержимое PromiseResult, возвращаемое из вычисляемого свойства

#javascript #vue.js #promise #computed-properties

#javascript #vue.js #обещание #вычисляемые свойства

Вопрос:

Я вычислил свойство, как показано ниже, которое возвращает res , где res является объектом Promise . Причина, по которой я не могу использовать этот скрипт внутри created() или mounted() перехват, заключается в том, что this.selectedObject null когда я это делаю.

Однако я доволен res , проблема возникает, когда мне нужно отобразить PromiseResult в html : <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;
    },
  

Ответ №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>