Gesture on dynamically generated components

Hi,

I’m learning Ionic and using with Vue 3, with which I do already have some experience. I have the following code in my template

<ion-list v-for="message in messages" :key="message.id">
  <ion-card :id="`card${message.id}`">
    <ion-card-header>
      <ion-card-title>{{ message.user }}</ion-card-title>
    </ion-card-header>
    <ion-card-content> {{ message.text }} </ion-card-content>
  </ion-card>
</ion-list>

How can I create and perform gesture on individual cards?

I tried the following but it doesn’t work right away. I have to touch it to activate it and then I can use the gesture. Adding async/await didn’t seem to make a difference.

<ion-card :id="`card + ${message.id}`"  @touchstart="callTouch" >...

let gesture = ref(null);

const callTouch = async (evt) => {
  const elemId = evt.srcElement.parentElement.id;
  const card = document.getElementById(elemId);

  gesture.value = await createGesture({
    el: card,
    gestureName: 'swipe-to-move',
    gesturePriority: 30,
    threshold: 10,
    direction: 'x',
    passive: false,
    // rest of the gesture code
  });

  gesture.value.enable();
};

Any help would be appreciated. TIA!

1 post - 1 participant

Read full topic