Hello, I cannot get the virtual list example to work at all. I copied code (I changed the misspelling : virtual-list-params):
<template>
<f7-page>
<!-- <f7-navbar back-link="Back" title="Virtual List"></f7-navbar> -->
<!--
Searchbar to search thorugh VL Items
List to search specified in "search-list" prop
-->
<f7-searchbar
search-container="#search-list"
search-item="li"
search-in=".item-title"
></f7-searchbar>
<!-- This block will become visible when there is nothing found -->
<f7-list class="searchbar-not-found">
<f7-list-item title="Nothing found"></f7-list-item>
</f7-list>
<!-- Search through this list -->
<f7-list
id="search-list"
class="searchbar-found"
media-list
virtual-list
:virtual-list-params="{ items: items, height: 63, searchAll: searchAll, renderExternal: renderExternal }"
>
<ul>
<!-- we will get the items we need to render from VL render external callback -->
<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: function () {
var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
title: 'Item ' + i,
subtitle: 'Subtitle ' + i
});
}
return {
items: items,
vlData: {},
};
},
methods: {
// Function to proceed search results
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i += 1) {
if (items[i].title.toLowerCase().indexOf(query) >= 0 || query.trim() === '') found.push(i);
}
return found; // return array with mathced indexes
},
renderExternal(vl, vlData) {
this.vlData = vlData;
},
},
}
</script>
I put this code in my virtual-list.vue file. I see the blue search bar but nothing shows up in the list and nothing happens when I type into the search. I consoled the list items and I do see all of them. I also put a console.log in searchAll and renderExternal but I see nothing.
<div class="list-block searchbar-found media-list" id="search-list" virtual-list="" virtual-list-params="[object Object]"><ul></ul></div>
is rendered?
Any thoughts on what might be wrong?