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.

William Juan · Accepted Answer · 2021-05-11 10:53:08Z

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>

answered May 11, 2021 at 10:53

William Juan

1,4151 gold badge9 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Philipp S. Over a year ago

Thank you. Where did you find the ContentView component? It is not documented here: nativescript-vue.org/en/docs/introduction . Is it possible to use ListView (nativescript-vue.org/en/docs/elements/components/list-view) with static content?

William Juan Over a year ago

There are some info about ContentView here. I think ListView is more used for dynamic contents compared to static content.

Philipp S. Over a year ago

Thank you. ContenView and tap is working fine. Clicking on a dynmaic ListView content gives a "tab" feedback on the element. Can I do this also somehow with ContentView?

William Juan Over a year ago

I think those are the default behavior of buttons and ListView. It is possible, but you would need to create your own custom gesture handler. It's probably easier to use a ListView/button if you want that feedback.

Philipp S. Over a year ago

Do you know if I can use ListView somehow with static content (not coming from an array, instead I want to write my elements directly into my template [Like my example with a Stacklayout]) ?

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related