foxbenjaminfox/vue-async-computed

clear value before updating

wendt88 opened this issue · 3 comments

It would be nice (also with a setting-parameter) to clear the value while updating.
like:

<div v-if="!data">{{ data }}</div>
<spinner v-else/>
export default {
    asyncComputed: {
        data () {
            return this.http.get('...', {
                params: {
                    property: this.someProperty
                }
            })
        }
    }
}

so every time, someProperty my asyncComputed-property data gets evaluated, but the spinner component is shown only the first time.
there should be a possibility to say, set data to default value every time before the promise gets evaluated

I can see the use case for this. The initial purpose of this library was actually the opposite: to enable you to treat a remote (or otherwise asynchronously computed) property almost as if it were fully synchronous, abstracting away the asynchronous request and making it appear like any other computed property. But I can also see why that's not always what is wanted, and your use case certainly is one that should be easy enough to add support for.

So while this isn't really the core purpose of vue-async-computed, I'll see about adding a setting for this.

Using #45, you could do:

<div v-if="data && !$asyncComputed.data.updating">{{ data }}</div>
<spinner v-else/>

I agree, now that #45 is merged, this gives you a nice and clean way of doing what you want here.

This approach will also give you more control of what happens in each separate case: before it's loaded, after it's loaded, while it's updating, or if it had an error. I don't like the idea of blurring the distinction between the first and the third of those automatically, but of course if that's what your use case needs, you certainly should have the tools to be able to easily do that, even if it's not the default behavior of the vue-async-computed library.