Skip to content

Commit 86ba565

Browse files
authored
fix: example for handling events in LV
1 parent 50c7c08 commit 86ba565

File tree

1 file changed

+8
-2
lines changed

1 file changed

+8
-2
lines changed

content/docs/en/elements/components/list-view.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,15 @@ Only the above variables are available in this scope, and currently you do not h
4949

5050
## An important note about `v-for`
5151

52-
`<ListView>` does not loop through list items as you would expect when using a [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) loop. Instead `<ListView>` only creates the necessary views to display the currently visible items on the screen, and reuses the views that are already off-screen when scrolled. This concept is called _view recycling_ and is commonly used in mobile apps to improve performance.
52+
`<ListView>` does not loop through list items as you would expect when using a [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) loop. Instead `<ListView>` only creates the necessary views to display the currently visible items on the screen, and reuses the views that are already off-screen when scrolled. This concept is called _view recycling_ and is commonly used in mobile apps to improve performance.
5353

54-
This is important because **you can't rely on event listeners attached inside the `v-template`**. Instead, you need to use the `itemTap` event which contains the index of the tapped item and the actual item from the list.
54+
**This is important, because you should not use `key` properties within your v-templates, as they will force the ListView to re-create the views and prevent view recycling from working properly.**
55+
56+
To use multiple event listeners within a ListView, you can pass in the current item to the listener with `@tap="onTap(item, $event)"`.
57+
58+
[Check out this playground with multiple buttons in each ListView cell](https://play.nativescript.org/?template=play-vue&id=ZEgWFu&v=1)
59+
60+
If you only need to handle taps on the whole cell, you can use the `itemTap` event which contains the index of the tapped item and the actual item from the list.
5561

5662
```javascript
5763
onItemTap(event) {

0 commit comments

Comments
 (0)