F7VUE - virtual-list: how to get the itemBeforeInsert event

Questions
1

When I create a Virtual-List in F7Vue, how can I subscribe to the itemBeforeInsert event?

this.$refs.f7List.f7VirtualList.on("itemBeforeInsert", function( virtualList,fragment ) {
  console.log("itemBeforeInsert", fragment);
});

nor does this:

 this.$f7.on("vlItemBeforeInsert", function() {
  console.log("vlItemBeforeInsert");
});

or this:

this.$f7.virtualList.get(".searchbar-found").on("itemBeforeInsert", function( virtualList,fragment ){
  console.log("itemBeforeInsert", fragment);
});

The documentation is pretty sparse on this…

2

ok - after reading the F7-code, it turns out, that the itemBeforeInsert etc… - events are not fired as soon as there’s a renderAll method passed to the virtual list.

And even then: the insertItem... events are sent for the whole range of rendered items:

e.g. copying a single item and inserting it to another location, triggers the insertItemBefore for all the items currently in the list…

this.$refs.f7List.f7VirtualList.insertItemBefore(6,JSON.parse(JSON.stringify(this.items[0])))

That was not what I expected (I expected to get the event for just the newly added items… but anyway - I keep this here for reference. But tbh: @nolimits4web - things like that would be a good thing to have in some kind of documentation… (see my other thread here:


)

3

No events in this case because rendering is handled by Vue itself. And i don’t really understand why they are needed with Vue? With Vue it is possible to detect before/after insert by means of Vue

4

Because there’s a difference, if you do, e.g.

 let myItem = {
    title: `Item ${Date.now()} added by vue`,
    subtitle: `Subtitle ${Date.now()}`
  };
  this.items.splice(0, 0, myItem);

or:

let myItem = {
    title: `Item ${Date.now()} added by F7`,
    subtitle: `Subtitle ${Date.now()}`
  };
  this.$refs.f7List.f7VirtualList.insertItemBefore(0, myItem);

the first one doesn’t redraw the (list) item if it’s visible - although it is added properly to the items - and the renderAll event is not sent.

the second one redraws the (list) item, but in the renderAll event, all items in the current views are passed (vlData.fromIndex and vlData.toIndex)…

Both methods add the item properly to this.items …

Ideally I would have been notified, which element was supposed to be added (like in a Proxy), so these things are de-coupled (and e.g. the list (or other elements) would know, it was updated…)