Touch Directive Error

  • 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?

  • Admin

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

  • @rstoenescu sure, here it is:
    The component I’m using is Index.vue

  • Admin

    Took a look.

    1. 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".

    2. Instead of using document.getElementById() you could assign that node a Vue ref and then use it.

    3. 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 @@
    -    <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}}
    @@ -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 () {

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

  • @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.

Log in to reply