[SOLVED] Can't get virtual list working on vue

Questions
1

Hi,

I am trying to get the example virtual list working for vue:

I copied the exact example. I can see the list of rendered list items but when i start typing (2000 for instance) the list is empty… (so the virtual list is actually working but the search is not)

Is the example somehow corrupted?

Kind Regards,

Peter

2

Fixed it myself. search-container has the value .virtual-list This did not work for me. I added the value test to the searchbar-found class and set search-container to test… then it started to work. Full code:

<template>

  <f7-page>

      

    <f7-navbar title="Virtual List">

      <f7-subnavbar :inner="false">

        <f7-searchbar

          search-container=".test"

          search-item="li"

          search-in=".item-title"

          :disable-button="!$theme.aurora"

        ></f7-searchbar>

      </f7-subnavbar>

    </f7-navbar>

    <f7-list class="searchbar-not-found">

      <f7-list-item title="Nothing found"></f7-list-item>

    </f7-list>

    <f7-list

      class="searchbar-found test"

      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"

          media-item

          link="#"

          :title="item.title"

          :subtitle="item.subtitle"

          :style="`top: ${vlData.topPosition}px`"

        ></f7-list-item>

      </ul>

    </f7-list>

  </f7-page>

</template>

<script>

  export default {

    data() {

      const items = [];

      for (let i = 1; i <= 20000; i += 1) {

        items.push({

          title: `Item ${i}`,

          subtitle: `Subtitle ${i}`,

        });

      }

      return {

        items,

        vlData: {

          items: [],

        },

      };

    },

    methods: {

      searchAll(query, items) {

        const found = [];

        for (let i = 0; i < items.length; i += 1) {

          if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);

        }

        return found; // return array with mathced indexes

      },

      renderExternal(vl, vlData) {

        this.vlData = vlData;

      },

    },

  };

</script>
1 Like