Display the data returned from a computed property PromiseResult using VueJS

Question

Display the data returned from a computed property PromiseResult using VueJS

After calculating the property shown below, it will output res, which is a Promise object. The reason I cannot place this script inside the created() or mounted() hook is due to the fact that this.selectedObject is null at that time.

I am satisfied with the result in res, but the issue arises when I attempt to display PromiseResult in HTML:

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

. Instead of displaying the content of PromiseResult, it just shows [Promise object]. Any assistance on this matter would be greatly appreciated.

  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

Answer 1

Answer №1

It is important to note that this approach is not recommended for achieving the desired outcome. In Vue.js, computed properties should consist of simple getters that access nested reactive values. Any external operations should be performed within methods.

After examining your issue, here is a revised solution:

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>

Answer 2

It is important to note that this approach is not recommended for achieving the desired outcome. In Vue.js, computed properties should consist of simple getters that access nested reactive values. Any external operations should be performed within methods.

After examining your issue, here is a revised solution:

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>

Display the data returned from a computed property PromiseResult using VueJS

Answer №1

Similar questions

Initiating Ajax to trigger the body's onLoad event

Obtain a custom token after next authentication through Google login

Pass information from Vue JS v-for to a button when it is clicked

Enhance your Angular component by integrating property bindings and events with transcluded elements

403 Error Code - Access Denied when trying to access Cowin Setu APIs

What situations call for the use of 'import * as' in TypeScript?

The utilization of $(this) proves to be ineffective

Using Javascript to fetch JSON data from a PHP file hosted on an IIS server, incorporating JSONP with

Attempting to transfer elements from an iteration into a separate array

How can I make my div change color when the check-box is selected?

How can a loading bar be shown while a PHP page is loading?

Tips for implementing async await properly within a function array that contains two functions for utilizing Promise.all in Vue

Error: Issue determining the type of variable. Unable to eliminate type 'any'

Is it necessary to use callbacks when using mongoose's findbyid with express to retrieve an object from the database? Are callbacks still important in modern JavaScript frameworks?

When a radio button is checked, add a class to its parent element that has a specific class assigned to it

Unable to process form submission with AngularJS + Stormpath

Modifying the style of a specific row when the form is submitted

Arranging Menu Items in a Horizontal Stack Instead of a Vertical Stack Using v-for in Bootstrap Navbar

Putting AngularJS controller through its paces using Jasmine

List rendering malfunctioning due to dynamic changes