set value when loading

Custom default value, which will be used until the data is loaded for the first time, but however, how can i set loading value every time with this plugin. Example, how can i set loading status after i click a btn, and before async data is prepared

[foxbenjaminfox]

I see what you mean, and I see why you want to use vue-async-computed for that. Indeed, perhaps this is a reasonable use case for vue-async-computed.

Nevertheless, I feel that the example is slightly stretching what vue-async-computed is meant to do: My goal with vue-async-computed is to make the fact that the computed data is asynchronous completely transparent, so that you can treat it almost exactly the same way you’d treat regular computed properties.

But as I said, I do see your use case, and while it is slightly outside the scope of vue-async-computed as I originally envisioned it, I agree it’s a reasonable extension.

There is an easy, but undocumented, way to get vue-async-computed to do this. Hopefully in the future I’ll clean it up and document it properly, if it’s something that people need.

You can overwrite an async computed property synchronously within the asyncComputed function, and the computed value will automatically reset to the correct computed value once the promise resolves.

In other words, you can do this:

const MyComponent = {
  template: `
  <div>
     <button @click="btnClick('something')">Load Something</button>
     <button @click="btnClick2('else')">Load Something else</button>
     <span>{{myData}}</span>
  </div>`,
  data () {
    return {
      loadWhat: 'something',
      loadWhat2: 'else'
    }
  },
  asyncComputed: {
    async myData(){
      this.myData = 'Loading myData'
      return (await this.$http.get('/some/url', { loadWhat: this.loadWhat + this.loadWhat2 })).data
    },
    async myData2(){
      this.myData2 = 'Loading myData2'
      return (await this.$http.get('/some/url2', { loadWhat: this.loadWhat + this.loadWhat2 })).data
    }
  },
  methods: {
    btnClick (loadWhat) {
      this.loadWhat = loadWhat;
    },
    btnClick2 (loadWhat) {
      this.loadWhat2 = loadWhat;
    }
  }
}

This will cause the effect you want: Whenever one of the dependencies change, the value of myData and myData2 immediately (actually, on the next tick) take on a value which is a loading message, while at the same time issuing the async request. Then when the async request resolves, the properties go back to having the appropriate computed value.

[foxbenjaminfox]

I’m glad you’ve found your solution.

I will keep this in consideration as a formal feature to add in the future. 😃