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!

I don’t have an answer to your specific question, but I have a few pointers.

You are doing a v-for on ion-list. You don’t want multiple lists. You would want to do a v-for on an ion-item within ion-list - ion-list documentation

It might be better to create a separate Vue component for the card so you don’t have to deal with ids and getElementById. This way the card and gesture logic is contained within a component.

You might also want to look at ion-item-sliding. Not sure if those built-in gestures suit your use case.

2 Likes

is there a reason you are not using swiperjs?

1 Like

Thanks for the feedback. I guess I could change it to <ion-item>

Good tip about creating a separate Vue component for the cards. I’ll try it out.

I think ion-item-sliding is getting deprecated in the next version so that’s why I’m avoiding them.

Hi Aaron, have been following you on YouTube. Your tutorials are super helpful. Thanks for those!

I may resort to using swiperjs but I figured if I can get away with not adding another library in my project unnecessarily, that would be best.

It might be better to create a separate Vue component for the card so you don’t have to deal with ids and getElementById . This way the card and gesture logic is contained within a component.

This worked. Thanks!

1 Like