How to use vue-router with vue-touch-events

Question

I tried to use vue-router with vue-touch-events this way:

<i v-touch="go('home')" class="fas fa-bars"></i>

<script>
  export default {
    name: "Nav",
    methods: {
      go: function(state) {
        this.$router.push(state)
      }
    }
  }
</script>

This does not work as go('home') is executed every time the view renders and not on touch/tap.

Answer 1

The v-touch value must be a function; go('home') will be called immediately and returns undefined which is not a function.

Try this instead:

<i v-touch="() => go('home')" class="fas fa-bars"></i>

v-on is the only directive that accepts the syntax you used; the Vue template compiler will not wrap your expression in a function for other directives which is why you must do it manually.