Open Pitouli opened 2 years ago
One solution with the Tinder View "as is", is to listen to the "update:queue" event, and to trigger an action in my store to replace the store queue with the queue received through this event. Functionally, it works, but it is strange to have to replace the store queue with the "same" queue only to trigger the watch.
Note that it works but there is a "warning" in the console for every "swipe":
Write operation failed: computed value is readonly
I have a big issue (with Vue3): when I provide a
queue
with a getter of my store, the tinder breaks.After analyzing the Tinder code, it seems that the cards are not a direct representation of the
queue
but of alist
internally built as a copy of thequeue
, and updated every time thequeue
changes thanks to awatch
on thequeue
.The issue is that there is a breaking change with Vue3:
https://github.com/shanlh/vue-tinder/blob/add9d84800c07af7e44d498bf79216722b303a17/src/components/vue-tinder/Tinder.vue#L220-L227
If we replace this code by the following, it works well:
But from what I read, "deep watchers" are the devil...
I observed that there is a
update:queue
event emitted every time the queue changes. It is not documented officially, but it's there. Perhaps it would be a good place to do the samediff
operation?Or perhaps, it would be even "cleaner" to simply create a method accessible on the Tinder instance, that the developper will trigger every time the queue is updated?
What do you think?