Vue watcher restore old values?

Question

im using this component to make a list of sortable items. https://sortablejs.github.io/Vue.Draggable/#/simple

I have one array with the items in my view component data. Then i use an v-for to pain the list, one row for each item in my array.

So everytime i move one item, the array of items gets sorted and change the order of the array items, thats the behaviour of this component.

But i have to make a post call to an api to save the new order fot the list. So i defined a watcher over the array of items, and everytime it gets sorted by the draggable component, i make the request to the api if the array order has changed.

The problem comes when this request fails, i want to restore the old values in the view, so i dont have one order in the view an another different stored in database.

Inside my watcher i have prevValues and newValues, that i use to compare and check if there is any change in the items order, then make the request, and then, if the request fails, restore the datavalue with the prevValues array.

The problem is that could get to an infinite loop, because when i restore the old values, the watcher over the original array is triggered again, make the request, fails, restore values and so on.

Is there any way to restore old values passed to a watcher without triggering the watcher again?

Thank you

can you define the update function at dragend instead of watching the array. or you could write a condition to check if array is changed before sending the request. — whitespace
– whitespace, Commented Aug 5, 2020 at 14:36
when you assign a shallow copy after each sort you can exit the watcher when (prev == current) — Estradiaz
– Estradiaz, Commented Aug 5, 2020 at 14:40
I check everytime if there are changes before sending the request. But the vue draggable modifies my array of items, and when i try to restore the old values, i have the new ones stored so it triggers the watcher again. I didnt try the dragend function, maybe it could work. Thank you. — Sampudon
– Sampudon, Commented Aug 5, 2020 at 14:41
In the second iteration the prevValues are the new ones, so restoring the olvalues count as a change over my data. — Sampudon
– Sampudon, Commented Aug 5, 2020 at 14:43
when making the request you could check if a flag is set, which will be set only if there have been no error responses. If there is was an error response it would simply skip making the request and update the value. — whitespace
– whitespace, Commented Aug 5, 2020 at 16:49

Noah Stahl · Accepted Answer · 2020-08-05 14:39:26Z

1

It would be more reliable to react to drag events to trigger your API calls, rather than watching the data. That way your code only does work in response to user action.

Alternatively, stash a copy of the original array and use something like deep-equal to compare it to the latest value to determine if changed before making a call.

answered Aug 5, 2020 at 14:39

Noah Stahl

7,7235 gold badges30 silver badges42 bronze badges

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

1 Comment

Sampudon Over a year ago

Thats look like the better option, I didnt even know it has drag events, i will try it. Thank you.

Collectives™ on Stack Overflow

Vue watcher restore old values?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related