Maximum recursive updates exceeded.

[websharik]

v-touch:swipe.left="showSidebar=false" v-touch:swipe.right="showSidebar=true"

Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

{
  "dependencies": {
    "core-js": "^3.20.3",
    "vue": "^3.2.27",
    "vue-router": "^4.0.12",
    "vue3-touch-events": "^4.1.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.2.27",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2"
  }
}

node -v //v16.13.1

Events not working.

[michelwaechter]

+1

[chady]

Just in case anyone else lands here and is struggling with the same issue, you can see the solution in the documentation:

https://github.com/robinrodricks/vue3-touch-events#passing-parameters-to-the-event-handler

You shouldn't pass your changes directly in the event as: v-touch:swipe.left="showSidebar=false" Instead have a method that returns a callback to set the updates:

v-touch:swipe="toggleSidebar"

And in your methods something like:

methods: {
   toggleSidebar() {
      return (direction) => {
          this.showSidebar = direction === 'right';
      }
   }
}

[mansoorkhan96]

Just in case anyone else lands here and is struggling with the same issue, you can see the solution in the documentation:

https://github.com/robinrodricks/vue3-touch-events#passing-parameters-to-the-event-handler

You shouldn't pass your changes directly in the event as: v-touch:swipe.left="showSidebar=false" Instead have a method that returns a callback to set the updates:

v-touch:swipe="toggleSidebar"

And in your methods something like:

methods: {
   toggleSidebar() {
      return (direction) => {
          this.showSidebar = direction === 'right';
      }
   }
}

WOW! This worked like a charm. I remember Vue docs suggest this pattern. I still can not understand how this works differently?