Vue virtual list not loading more items on scroll

I am trying to work with virtual list in vue. I am first getting some data async then using replaceAllItems to update the virtual list.

The data is displaying in the virtual list but on scroll the area below is just a white empty space. I am loading 1000 items but only about 50 get rendered. I am not sure why it is not updating. Please can someone help me out to understand why it doesn’t work as expected?

<f7-page name="home">

        <!-- Top Navbar -->
        <f7-navbar :sliding="false" title="Directory">
            <a href="#" slot="left">Refresh</a>
            <a href="#" slot="right">Log out</a>

            <f7-subnavbar :inner="false">

        <!-- Page content-->
        <f7-list class="searchbar-not-found">
            <f7-list-item title="Nothing found"></f7-list-item>
                :virtual-list-params="{ items, searchAll, renderExternal, height: $theme.ios ? 63 : ($ ? 73 : 46)}"
                        v-for="(item, index) in vlData.items"

    export default {
        data() {
            return {
                items: [],
                vlData: {
                    items: [],
        async beforeCreate() {
                // Get some data
                let directory = await this.getSomeData()

                // Add data to virtual list
                var theList = this.$f7.virtualList.get();

        methods: {
            searchAll(query, items) {
                const found = [];
                for (let i = 0; i < items.length; i += 1) {
                    if (items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);

                return found; // return array with matched indexes
            renderExternal(vl, vlData) {
                this.vlData = vlData;

This still not working, even if I hard code an array of objects in the items: []. So it seems its not just the async thats breaking it, it just goes white blank after a short amount of scroll… what could it be??

I also inspected the component data in vue dev tools and the items: [] is always empty, it never gets updated. As far as I have seen from other sources… all i would need to do is use the replaceAllItems() method… pretty confused by this.

Just to points i see wrong here:

  1. I can’t see you set something to Vue’s component items array
  2. F7 Virtual List can’t be accessed in beforeCreate, because it got created in mounted

Thank you for your help. I really appreciate.

I have added the items and it is now working (I did have it in mounted originally I was just trying various things to try and make it work so thanks for that too. )

I added:
this.items = […directory];

Also added missing style to list item.
:style="top: ${vlData.topPosition}px"

Thank you. :slight_smile: