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: https://github.com/sergiuwd/bcard
    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 @@
     <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 () {
    


  • 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
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.