How do you use Gestures API in a Vue Component?

I don’t understand how to integrate the Vue Gestures double press API example in the Ionic documentation into a Vue component. The example seems to be lacking any Component context and my attempts to integrate either inline after the tag or in a setup() or created() method all produce an event registration error.

Uncaught (in promise) TypeError: Cannot read property '__zone_symbol__addEventListener' of null

Here is an example that produces the error:

DoublePressDemo.vue

<template>
  <ion-content class="ion-padding-top">
    <div class="rectangle">
      Double click me to change the color
    </div>
  </ion-content>
</template>

<script>
import {IonContent} from '@ionic/vue';
import {createGesture} from '@ionic/vue';
export default {
  name: "DoublePressDemo",
  components: {IonContent},
  created() {
    const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
    const DOUBLE_CLICK_THRESHOLD = 500;
    const rectangle = document.querySelector('.rectangle');
    const gesture = createGesture({
      el: rectangle,
      threshold: 0,
      onStart: () => {
        onStart();
      }
    });

    gesture.enable(true);

    let lastOnStart = 0;
    let currentColor = 'rgba(0, 0, 255, 0.5)';

    const onStart = () => {
      const now = Date.now();
      if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
        rectangle.style.setProperty('background', getRandomBackground());
        lastOnStart = 0;
      } else {
        lastOnStart = now;
      }
    }

    const getRandomBackground = () => {
      const options = backgrounds.filter(bg => bg !== currentColor);
      currentColor = options[Math.floor(Math.random() * options.length)];

      return currentColor;
    }
  }
}
</script>

<style scoped>
.rectangle {
  width: 100%;
  max-width: 500px;
  height: 100px;
  background-color: rgba(0, 0, 255, 0.5);
  text-align: center;
  line-height: 100px;
  user-select: none;
}
</style>

1 post - 1 participant

Read full topic