I have some data in an array to be displayed in a virtual list that I want to sort before building the list. I already have it working so the list re-orders on a pull-to-refresh. But for some annoying reason it doesn’t work in the pageInit listener. Any idea?
return {
data: function () {
const self = this, app = self.$app;
return {
items: [
{distance: 23, name: 'apple'},
{distance: 16, name: 'pear'},
{distance: 59, name: 'orange'},
{distance: 8, name: 'banana'},
]
};
},
methods: {
orderByKey: function (items, key) {
const self = this;
function compareKey(a, b) {
if(a[key] < b[key]) return -1;
if(a[key] > b[key]) return 1;
return 0;
}
return items.sort(compareKey);
},
ptrPull: function (e, done) {
const self = this;
setTimeout(function () {
self.orderByKey(items, 'distance');
self.virtualList.replaceAllItems(items);
done();
}, 500);
},
},
on: {
pageInit: function() {
const self = this, app = self.$app;
// For some reason this isn't getting honoured
self.items = self.orderByKey(self.items, 'distance');
self.virtualList = app.virtualList.create({
el: self.$el.find('.virtual-list'),
items: items,
itemTemplate: '<li>{{name}} : {{distance}}</li>',
height: 100,
});
},
},
}
This is a simplified version of my code for illustration.