Trigger a re-render within a Vue async watch before a blocking operation

Question

I have an async watch that fetches some data from the server. It will batch process the Response in a blocking operation. I am trying to update the view before kicking off the blocking operation, like so:

Vue.component("foo-bar", {
    ...
    watch: {
        async things() {
            const response = await API.getThings();
            this.someUIMessage = `processing ${response.length} things...`;
            someBlockingOperation(response);
        }
    }
}

But this.someUIMessage is not updated in the view until after someBlockingOperation. I stuck an await Vue.nextTick() in between setting the string and calling the blocking op, and this.$forceUpdate(), but without success.

What does work (sometimes! depends on what else is going on in the app) is calling setTimeout(() => someBlockingOperation(response), 0), but that seems like a kludge. Is there a step I'm missing?

yes, fixed (only a typo in the snippet, the actual code has the `await`) — DWR, Oct 05 '20 at 17:16

score 0 · Answer 1 · edited Jul 16 '22 at 03:44

You may need to show some more code because your use case is exactly described in the docs - Async Update Queue and await Vue.nextTick() should work

If your someBlockingOperation take too long, it may be worth to think about UI responsiveness anyway and maybe apply a strategy of splitting up you workload into smaller chunks, process only one at a time and use setTimeout(nextBatch, 0) to schedule "next chunk" processing. See this SO question for more details...

Trigger a re-render within a Vue async watch before a blocking operation

1 Answers1