Nativescript-vue: How to make a custom component tapable?

Question

Can I make a custom element tapable?

This is my component:

<template>
  <FlexboxLayout class="profile-item" flexDirection="column">
    <label :text="text" />
    <label class="subtext" v-if="subtext" :text="subtext" />
  </FlexboxLayout>
</template>

And this is how I would like to use it:

<template>
  <ScrollView>
    <StackLayout>
      <Item text="Test" @tap="onItemTap" />
      <Button text="Button" @tap="onItemTap" />
    </StackLayout>
  </ScrollView>
</template>

<script>
import Item from "./Item";

export default {
  components: {
    Item
  },
  methods: {
    onItemTap(event) {
      alert('test');
    },
  }
};
</script>

Taping the buttons works but not my custom element.

Answer 1

You can either handle the tap event from inside the custom element or wrap the custom element inside a ContentView and attach the tap event to the container like this:

<template>
  <ScrollView>
    <StackLayout>
      <ContentView @tap="onItemTap">
        <Item text="Test" />
      </ContentView>
      <Button text="Button" @tap="onItemTap" />
    </StackLayout>
  </ScrollView>
</template>