Virtual List component not working


#1

I have copied the virtual list page from the kitchen sink to my app, but it is instead giving me an error I have failed to figure out.

This is the javascript of the kitchen sink page. I haven’t edited anything.

<script>
return {
data: function() {
  var items = [];
  for (var i = 1; i <= 10000; i++) {
    items.push({
      title: 'Item ' + i,
      subtitle: 'Subtitle ' + i
    });
  }
  return {
    items: items
  };
},
on: {
  pageBeforeRemove: function () {
    var self = this;
    self.virtualList.destroy();
  },
  pageInit: function() {
    var self = this;
    self.virtualList = self.$app.virtualList.create({
      // List Element
      el: self.$el.find('.virtual-list'),
      // Pass array with items
      items: self.items,
      // Custom search function for searchbar
      searchAll: function (query, items) {
        var found = [];
        for (var i = 0; i < items.length; i++) {
          if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
        }
        return found; //return array with mathced indexes
      },
      // List item Template7 template
      itemTemplate:
        '<li>' +
          '<a href="#" class="item-link item-content">' +
            '<div class="item-inner">' +
              '<div class="item-title-row">' +
                '<div class="item-title">{{title}}</div>' +
              '</div>' +
              '<div class="item-subtitle">{{subtitle}}</div>' +
            '</div>' +
          '</a>' +
        '</li>',
      // Item height
      height: self.$theme.ios ? 63 : (self.$theme.md ? 73 : 46),
    });
  }
 }
}
</script>

Am instead getting the following error

Am using v4.4.3 with webpack. What am I missing?


#2

export default {


#3

Thank you.

What is the difference between the two?