robinrodricks / vue3-touch-events

Simple touch events support for vue.js 3
MIT License
216 stars 27 forks source link

Touch events not bound #1

Closed gilphilbert closed 3 years ago

gilphilbert commented 3 years ago

Thanks for creating this library - exactly what I was looking for! However, I can't get it working!

I installed using npm (npm -i -S vue3-touch-events)

In my main JS file, I have the following:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vue3TouchEvents from 'vue3-touch-events'
...
Vue.use(Vue3TouchEvents)

Vue.use(VueRouter)
...
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')

Then, in my template I have the following defined:

<template>
<div :class="{ 'no-controls': this.$route.path==='/' }">
  <div id="content-container" v-touch:swipe.left="doHideMenu" v-touch:swipe.right="doShowMenu">
    <router-view :playback="playback" @showQueue="toggleQueue" ></router-view>
  </div>
  ...
</template>
<script>
...
export default {
  name: 'Main',
  ...
  props: [ 'isLoggedIn' ],
  methods: {
    toggleQueue (fixed = null) {
      this.showQueue = !this.showQueue
    },
    doShowMenu () {true
      this.showMenu = true
    },
    doHideMenu () {
      this.showMenu = false
    }
  }
}
</script>

However, the swipe gestures aren't working. When I had a look at the inspector in chrome, I can't see any events bound to the element other than the click and other basic events.

Any idea what I'm doing wrong?

Thanks!

gilphilbert commented 3 years ago

I found out what I was doing wrong... I was in the wrong branch of my own repo. Turns out this doesn't work with Vue 2.x!

robinrodricks commented 3 years ago

For vue 2 you can use the older library.. link in the Readme file.

On Tue, May 4, 2021, 8:31 AM gilphilbert @.***> wrote:

I found out what I was doing wrong... I was in the wrong branch of my own repo. Turns out this doesn't work with Vue 2.x ...

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/robinrodricks/vue3-touch-events/issues/1#issuecomment-831656191, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABT3UKTRIXDEFW42KV5Y4ETTL5PQLANCNFSM44BVK7DQ .