Can't get virtual list example to work

Questions
1

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?

2

Documentation is for v2. You are using v1, check v1.framework7.io

3

Just curious why you think I am using V1? I am indeed using V2.

Here is my main.js

// Import Vue
import vue from 'vue'

// Import F7
 import framework7 from 'framework7'

// Import F7 Vue Plugin
 import framework7Vue from 'framework7-vue'

 // Material Theme:
 import framework7Theme from 'framework7/dist/css/framework7.material.min.css'
 import framework7ThemeColors from 'framework7/dist/css/framework7.material.colors.min.css'


// Import App Custom Styles
import appStyles from './assets/sass/main.scss'

// Import Routes
import routes from './routes.js'

// Import Components
import login from './assets/vue/components/login.vue'
import dashboard from './assets/vue/components/dashboard.vue'

// Import js
import moment from 'moment';
vue.prototype.moment = moment;


import testGlobals from './assets/js/testGlobals.js';



// Init F7 Vue Plugin
vue.use(framework7Vue)

// Init App
var myApp = new vue({
el: '#app',
template: '<app/>',
data: {
  moment: moment
},
// Init Framework7 by passing parameters here
framework7: {
  root: '#app',
  material: true,
  routes: routes
},
components: {
  app: localStorage.getItem('client') === null ? login : dashboard
},
mixins: [ testGlobals]
});

This is my first time using F7 V2 and Vue so I apologize if I missing something simple.

4

The code I see is related to v1

5

Refer to original v2 webpack template https://github.com/framework7io/framework7-template-vue-webpack

6

This is where I got the template from, is it wrong?

then

it says v2? Am I missing something?

Thanks.

7

I just checked and it is in fact 1.6.5. Thanks!