Using both swipe.right and swipe.left on the same component won't work

[kino90]

Hello, thanks for this wrapper!

I was trying to set both v-hammer:swipe.left="onSwipeLeft" and v-hammer:swipe.right="onSwipeRight" with 2 different callbacks, but one of the two callbacks isn't working.

Is this a bug or there is a better way to do this?

Thanks!

[Aterr]

Having same problems.

[kino90]

@Aterr , I solved this using v-hammer:swipe.horizontal="onSwipe" and then parsing evt.direction inside onSwipe i can call onSwipeRight and onSwipeLeft.

That's not (of course) a fix, but it's working for me, until a fix is released!

[Aterr]

@kino90 Worked for me too! Thanks 👍

[bsdfzzzy]

Thanks for notifying it. I'll find some time to add this new feature, supporting more directions on just one line. Like
v-hammer:swipe.left.right.
Please look forward to next release.

[conradfr]

No new release unfortunately since then.

Is this library maintained ?

[bsdfzzzy]

@conradfr I'm planing to rewrite this repo totally recently.
And if someone has any idea or want to contribute to the project, you can leave a message here.

[bsdfzzzy]

Now you can use version 2.0.0, it supports.

[LukeCarlThompson]

Just installed the 2.0.1 version and having a similar issue. Tested in chrome.

If I attach swipe.left and then swipe.right no matter which direction I swipe it only ever fires the second event. In this case swipe.right.

I resorted to the previously mentioned work around.

[bsdfzzzy]

I tried in two ways. Both

swiper.left="test"
swiper.right="test"

and

swiper.left.right="test"

works fine. Could you show me your code or run the test in your browser and tell me the result? @LukeCarlThompson

[LukeCarlThompson]

I have different event firing on swipe.left and swipe.right

v-hammer:swipe.left="onSwipeLeft"
v-hammer:swipe.right="onSwipeRight"

In my tests onSwipeRight gets called which ever direction is swiped.
I tried with pan events also.

Is the syntax correct? I noticed you used swiper.left in your comment?

[bsdfzzzy]

@LukeCarlThompson Yes you're right. It's a bug. Thanks for your reminding! I have published a new version 2.1.0. Please have a try.

[LukeCarlThompson]

Thanks for the update!

Just tested with version 2.1.1 and getting some slightly different issues. I also tested with pan events.

Now if I have these events
v-hammer:swipe.left="onSwipeLeft"
v-hammer:swipe.right="onSwipeRight"

onSwipeRight fires only on a right swipe, but onSwipeLeft does not fire if i swipe left.

If i have these events
v-hammer:pan.start="onPanStart"
v-hammer:pan="onPan"

Then only the onPan event fires never the onPanStart.

If I reverse the order to
v-hammer:pan="onPan"
v-hammer:pan.start="onPanStart"

Then only onPanStart event fires and never onPan

However if I have
v-hammer:pan.start="onPanStart"
v-hammer:swipe.right="onSwipeRight"

Then both events fire at the expected time.

It seems that the issue is only when there are multiple events linked to the same gesture.

[LukeCarlThompson]

Oh I just now see the syntax has changed? Or I had it wrong before?

I should be using
v-hammer:panstart
instead of
v-hammer:pan.start

Multiple pan events are working now with the correct syntax.

However I still get the same behaviour when using swipe.left and swipe.right.

[bsdfzzzy]

Yes the syntax changed a little since version 2. I suggest you use swipe.left.right now. @LukeCarlThompson

[LukeCarlThompson]

Ok thanks for that. I have things working now with the pan events.

However if I wanted to have different events fire on swipe.left and swipe.right for the same element the problem would still exist.

[gerardo-rodriguez]

However if I wanted to have different events fire on swipe.left and swipe.right for the same element the problem would still exist.

I'm experiencing the same as @LukeCarlThompson. 🤔

[bsdfzzzy]

emmm...For now you can have some logic in your function to judge which direction is, so do the performance. @LukeCarlThompson @gerardo-rodriguez

[headStyleColorRed]

For anyone who has the same problem, as @bsdfzzzy said, you can use:

onSwipe(event){
console.log(event.type);
if (event.type == "swipeleft") {
insertYourFunction()
} else {
insertYourOtherFunction()
}
}