Async call for computed property - Vue.js

Question

I have a computed property that will only be used if a match for a property exists. Because of this, I'm making the call to get the data asynchronous so that it's only retrieved when needed. I'm having an issue though trying to make an async call to return data for a computed property.

Below is what I have:

new Vue({
    el: "#formCompleteContainer",
    data: {
        form: {},
        components: []
    },
    computed: {
        employeeList: function () {
            var self = this;
            if (_.some(this.components, function (component) {
                return component.ComponentInfo.Type === 8
            })) {
                var employees = [];
                $.ajax({
                    url: "/Form/GetAllUsers",
                    type: "GET"
                }).done(function (results) {
                    employees = results;
                });

                return employees;
            } else {
                return [];
            }
        }
    }
});

I know this isn't working because I'm returning before the call is complete. I've seen how to use deferredobjects and what not but I can't seem to figure out how to implement it with Vue.

github.com/foxbenjaminfox/vue-async-computed might be useful. — Daniel Beck
– Daniel Beck, Commented Jun 13, 2018 at 16:35
@DanielBeck I have decided to not use a computed property for what I am trying to do. But thank you for that link. I'll definitely check it out and maybe use it in a future project. — Dev 404
– Dev 404, Commented Jun 13, 2018 at 18:25

Michael2 · Accepted Answer · 2018-10-26 13:37:38Z

2

This is what vue-async-computed is meant for. It resolves the promise you returned and handles any race conditions.

new Vue({
    el: "#formCompleteContainer",
    data: {
        form: {},
        components: []
    },
    asyncComputed: {
        employeeList: function () {
            if (_.some(this.components, function (component) {
                return component.ComponentInfo.Type === 8
            })) {
                return $.ajax({
                    url: "/Form/GetAllUsers",
                    type: "GET"
                });
            } else {
                return Promise.resolve([]);
            }
        }
    }
});

answered Oct 26, 2018 at 13:37

Michael2

9304 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T.Woody Over a year ago

A 3rd party implementation is far from needed to make this work.

Sphinx · Accepted Answer · 2018-06-13 16:01:09Z

For your use case, I don't think computed property can implement the goal.

My solution:

create one data property as one 'defered' object,
then uses one watch to async call your backend to get new data, finally assign to the defered object

like below demo:

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    product: "Boots",
    deferedProduct: ''
  },
  watch: {
    product: function (newVal, oldVal) {
      setTimeout(() => {
        this.deferedProduct = 'Cats in ' + newVal + '!'
      }, 1500)
    }
  },
  methods: {
    nextProduct: function () {
      this.product += 'a'
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button @click="nextProduct()">Click Me!</button>
    <h2>{{product}}</h2>
    <h2>{{deferedProduct}}</h2>
</div>

Dev 404 · Accepted Answer · 2018-06-13 18:24:22Z

After doing some more research I have gone another route. I agree with Sphinx that I don't think what I am trying to achieve will work with a computed property.

Instead, this is what I am going with:

new Vue({
    el: "#formCompleteContainer",
    data: {
        form: {},
        components: [],
        employees: []
    },
    methods: {
        getEmployees: function () {
            var self = this;
            if (_.some(this.components, function (component) {
               return component.ComponentInfo.Type === 8;
            })) {
                $.ajax({
                    url: "/Form/Form/GetAllUsers",
                    type: "GET"
                }).done(function (results) {
                    self.employees = results;
                });
            }
        }
    },
    created: function () {
        this.form = pageModel.Form;
        this.components = pageModel.Components;
    },
    mounted: function () {
        this.getEmployees();
    }
});

T.Woody · Accepted Answer · 2019-11-21 16:33:44Z

0

As pointed out already, mounted and other 3rd party solutions can work.

However, better readability and component loading will come from putting the desired Promise within a data property. And then using the Vue lifecycle hook created, we can wait for that Promise to resolve with a .then.

For example:

requestService.js:

...
   async foo(){
      let myRequest = someRequest.createInstance()
      await myRequest.onReady()
      return myRequest.getSomePromise()
   } 
...

And then import the service into your component, as well as declaring a data prop:

myComponent.vue

...
   data: (){
      myPromiseLoc: null,
   }
...
   created: (){
      requestService.foo().then( result =>
      {
         this.myPromiseLoc = result
      }
   }
...

answered Nov 21, 2019 at 16:33

T.Woody

1,2382 gold badges13 silver badges26 bronze badges

2 Comments

Michael2 Over a year ago

This will only do the request once when the component is loaded. The task was to load the data only if a component with type 8 is displayed.

T.Woody Over a year ago

@Michael2 The SPECIFIC use case is always different. This questions, and the actual problem, has to do with async/await, promises, and lifecycle hooks. This answer encapsulates the users actual question just fine.

Collectives™ on Stack Overflow

Async call for computed property - Vue.js

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related