Touch Directive Error

sergiuwd

I’m trying to use the v-touch-swipe directive, but no matter what element I try to attach it to, I keep getting this error in the console:
Uncaught TypeError: ctx.handler is not a function at HTMLDivElement.end (eval at <anonymous> (app.js:1628), <anonymous>:2134:17)

Is this a known issue? What could be the problem?

rstoenescu

What version are you using? Any repo I can take a look to reproduce this? Thanks!

sergiuwd

@rstoenescu sure, here it is: https://github.com/sergiuwd/bcard
The component I’m using is Index.vue

rstoenescu

Took a look.

Assigning v-touch-swipe to hasSwiped() evaluates the function and the returned value is assigned as handler to v-touch-swipe. What you want is v-touch-swipe="hasSwiped".
Instead of using document.getElementById() you could assign that node a Vue ref and then use it.
I see CircleSlideshow errors out.

Here’s a quick diff of first things you must do:

diff --git a/src/components/Index.vue b/src/components/Index.vue
index 5f77ec8..51186c8 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -1,6 +1,6 @@
 <template>
   <q-layout>
-    <div slot="header" class="toolbar white" v-touch-swipe.horizontal="hasSwiped()">
+    <div slot="header" class="toolbar white" v-touch-swipe.horizontal="hasSwiped">
       <q-toolbar-title :padding="0">
         Quasar Framework v{{$q.version}}
       </q-toolbar-title>
@@ -14,7 +14,7 @@
     <div class="layout-view">
       <div class="container">
                        <div class="deco deco--title"></div>
-                       <div id="slideshow" class="slideshow">
+                       <div ref="slideshow" id="slideshow" class="slideshow">
 
                                <div class="slide">
                                        <div class="slide__item">
@@ -102,9 +102,10 @@ export default {
     }
   },
   mounted () {
-    document.documentElement.className = 'js'
-    console.log(window)
-    var slideshow = new window.CircleSlideshow(document.getElementById('slideshow'))
+    this.$nextTick(() => {
+      document.documentElement.className = 'js'
+      new window.CircleSlideshow(this.$refs.slideshow) // eslint-disable-line no-new
+    })
   },
   methods: {
     hasSwiped () {

sergiuwd

Hi, @rstoenescu! Thanks for your reply and help. I’ll work to fix this app using your tips.
BTW, great framework! Congrats!

sergiuwd

@rstoenescu Decided to import dynamics.js and classie VIA npm and make a component out of this slider, then rewrite the script. I think it’s the best solution.

No More Posting New Topics!

Touch Directive Error