Vue virtual list not loading more items on scroll

1

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">
                <f7-searchbar
                        search-container=".virtual-list"
                        search-item="li"
                        search-in=".item-title"
                        :disable-button="!$theme.aurora"
                ></f7-searchbar>
            </f7-subnavbar>
        </f7-navbar>

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

    </f7-page>

<script>
    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();
                theList.replaceAllItems(directory);

        },
        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;
            },
        },
    };
</script>
2

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.

3

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
4

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: