createGesture: error zone_symbol addEventListener

I want to build into an Ionic app using VueJS. And have problems with the “swipe function”.
When I swipe right or left, I want to call a function.

For testing I used the demo code from this page: Gestures - Ionic Documentation

The Chrome Dev Tools show me the following error message:

Uncaught (in promise) TypeError: Cannot read property ‘__zone_symbol__addEventListener’ of undefined at addEventListener

<script>
import { createGesture } from '@ionic/vue';
import { ref } from 'vue';
mounted() {

    const pRef = ref();
    const rectangleRef = ref();
    const gesture = createGesture({
      el: rectangleRef.value,
      onMove: (detail) => { onMove(detail); }
    })

    gesture.enable();

    const onMove = (detail) => {
      const type = detail.type;
      const currentX = detail.currentX;
      const deltaX = detail.deltaX;
      const velocityX = detail.velocityX;

      pRef.value.innerHTML = "
    <div>Type: ${type}</div>
    <div>Current X: ${currentX}</div>
    <div>Delta X: ${deltaX}</div>
    <div>Velocity X: ${velocityX}</div>
  "
    }

  }

Can someone tell me what I am doing wrong? Or is there a tutorial somewhere?

I use:
Ionic CLI : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.6.5
@ionic/vue: ^5.4.0 => 5.6.5

Can you reproduce this in a GitHub repo and provide a link?

Hi Liam,
thank you very much for the quick response.
I have stored the component “TheCard” from and deposited it in this repo for you.
Thanks a lot
Peter

The error message really should be improved here, but the problem is that you never assign rectangleRef to an element, so you are passing in undefined for the el value in the createGesture call.

How can I assign the complete component?
I have tried the following, but the error persists:
const rectangleRef = document.getElementById(this.id);

I have now tried this:

<div class="card" ref="myDiv“>

and

const rectangleRef = this.$refs.myDiv;

But the error persists:

Uncaught (in promise) TypeError: Cannot read property ‘__zone_symbol__addEventListener’ of undefined

I recommend looking at this ref documentation for some examples in Vue 3: Template Refs | Vue.js

The problem is not with Ionic Framework, it is that you are not passing in a valid element, so we are unable to call addEventListener on it.

You need to assign this ref to an element and then call createGesture once your component has been mounted. It might be easier to use the setup Composition API function with an onMounted hook: