CODEWITHSUNDEEP
javascriptjqueryanimationvue.jsvuejs2
Michał Fronczyk
Michał Fronczyk

Reputation: 1891

Vue.js - wait until animation finishes before updating a component

My page is a mix of static HTML+JQuery and some parts are written in Vue.js.

I have a simple Vue counter component that observes an array from a reactive store and shows the length of the array.

I also have a button on that adds something to the store's array. Currently, when the button is clicked, the counter immediately refreshes.

I want now to implement an animation (probably using JQuery) that runs for about a second when the button is clicked and I want the refresh of the counter to be deferred until the animation finishes. However, I can't just delay the insertion to the array, because I have other Vue components that observe it as well and I want them to update immediately. I also have another button that removes from the array and I want decreases to be applied immediately on the counter.

Can you suggest how to implement it using Vue.je?

Upvotes: 1

Views: 2458

Answers (1)

Roy J
Roy J

Reputation: 43881

Create a shadow array that the counter observes. watch the source array, and use setTimeout to copy it to the shadow array after a delay.

Upvotes: 1

Related Questions