[SOLVED] Framework7 Vue - Virtual List, loading JSON data for items?

Hey all, new to Framework7 but I’m really liking it so far.

I’m able to load up the items via json using beforeCreate and initializing data items with the JSON response as well as setting vlData as empty object - but the vlData object doesn’t get populated properly ] - which also breaks the searchAll filtering - which returns error ‘cannot get length of undefined’ from within the search function in the framework7 code.

How do I make sure the vlData object gets populated properly once my json response is done loading and injected into this.items ??

To get over this for now, I’ve simply hardcoded my json array into the data section of the Vue but I’d really prefer to load it up via asynch json call.

OH! one last thing - on your Vue doc page for Virtual Lists ( https://framework7.io/vue/virtual-list.html ) - there is a typo in your params value.

You will get an uncaught TypeError if you use the code as-is from the virtual-list page.

Uncaught TypeError: Cannot read property ‘params’ of undefined

fix it by changing the spelling error on virtual-list-params. The word virtual is spelled wrong in the sample code.

:virutal-list-params= should be changed to :virtual-list-params=, and then the example code in the virtual-list page for Vue will work out of the box.

Thanks in advance, and thanks for Framework7!!


You can use VL’s .replaceAllItems method with your async loaded JSON


Thanks for the response nolimits4web. Much appreciated, but not working.

I’m using the prepackaged version for VueJS with webpack found here:

And I’m also using the Vue specific documentation for Virtual List found here:

virtualList object doesn’t appear to have the .replaceAllItems method in the above codebase/instances.

Uncaught TypeError: this.$f7.virtualList.replaceAllItems is not a function.

The only methods of this.$f7.virtualList that are exposed are create, delete and get.

Perhaps the repo I am using might be missing those additional methods from the virtualList object?

Thanks in advance.

You need to access crated VL instance first https://framework7.io/vue/virtual-list.html#access-to-virtual-list-instance and then call it’s replaceAllItems method http://framework7.io/docs/virtual-list.html#virtual-list-methods-properties

Perfecto! Works like a charm. Thanks so much.

For others trying to nail this down - All I had to do was use the get method to “Get” the current instance of the virtualList object within my response from the API call in my beforeCreate function like so:

                this.items = response.data.records;

                var theList = this.$f7.virtualList.get();

Thanks nolimits4web, many many thanks.