how can i add click listener on virtual list

[kael777]

i add this code

<f7-list 
        id="search-list"
        class="searchbar-found"
        media-list
        virtual 
        inset 
        :virtual-items="mysub"
        :virtual-height="63"
        :virtual-search-all="searchAll"
        >
        <t7-template>
          <f7-list-item @click="onItemClick" media-item link="#" :title="'{{Username}}'" :subtitle="'left:{{Chips}}'">
          </f7-list-item>
        </t7-template>
      </f7-list>

try to handle each item's click,but it seems not work,it is version 0.5.7 i used

[kael777]

and here seems a spell wrong
https://github.com/nolimits4web/Framework7-Vue/blob/master/src/components/list-item.vue#L27
did that mean 'disabled': self.disabled?

[nolimits4web]

Click handler for VL should be added manually, e.g. in mounted callback:

$(this.el).on('click', '.virtual-list li', function (){
  //handle click
});

[ytbryan]

@nolimits4web How will you suggest to add the click listener for normal framework7 (non-vue) where there is no mount callback?

And since each item is rendered as you scroll, some items have no listeners added.

[nolimits4web]

@ytbryan it is possible to do it with Vue rendering and listen events in Vue way (as in https://github.com/nolimits4web/Framework7-Vue/blob/master/kitchen-sink/pages/virtual-list-vue.vue). In normal F7, it can be achieved using live event:

$('.virtual-list').on('click', 'a', function () {
  //do something
});

[ytbryan]

thank you for the answer. And thank you for framework7

@nolimits4web how will you suggest to get the index of the item to be deleted?

The dilemma i'm facing is that deleteItem takes in the index. If user wish to deleteItem on multiple items, there don't seem to be a way to retrieve the existing index of the item in the list.