Currently, I am attempting to organize an array of objects based on the attribute page, and I am doing this within a computed property using Vue.
The function I am utilizing involves building the objects in the following manner:
sorted: function(){
var pages = this.selectedKKS['pages'];
var list;
try {
list = [];
Object.keys(pages).forEach(function(key){
console.log(key + " is the key")
var obj = {};
obj.title = key;
obj.page = pages[key]
list.push(obj)
});
}
catch(e){
console.log(e);
}
var sorted = list.sort(function(a, b){
console.log('a.page is ' + a.page + ' and b.page is ' + b.page);
return a.page > b.page;
});
return sorted;
}
To ensure that my comparisons of pages are accurate, here is the output from the console log:
a.page is 84 and b.page is 28
App.vue?077f:353 a.page is 84 and b.page is 46
App.vue?077f:353 a.page is 28 and b.page is 46
App.vue?077f:353 a.page is 84 and b.page is 35
App.vue?077f:353 a.page is 46 and b.page is 35
App.vue?077f:353 a.page is 28 and b.page is 35
App.vue?077f:353 a.page is 84 and b.page is 14
App.vue?077f:353 a.page is 46 and b.page is 14
App.vue?077f:353 a.page is 35 and b.page is 14
App.vue?077f:353 a.page is 28 and b.page is 14
App.vue?077f:353 a.page is 84 and b.page is 5
App.vue?077f:353 a.page is 46 and b.page is 5
App.vue?077f:353 a.page is 84 and b.page is 8
App.vue?077f:353 a.page is 5 and b.page is 8
As I am iterating over this computed property in my template, it seems like the sorting is not being done correctly, resulting in an unintended outcome:
<f7-list>
<f7-list-item v-for="val in sorted" @click="openpdf(selectedKKS.url, val.page)">
<f7-col><span style="color: black">{{ val.title }}</span></f7-col>
<f7-col>{{ val.page }}</f7-col>
</f7-list-item>
</f7-list>
https://i.sstatic.net/alKdS.png
Could anyone provide insight into what might be causing this issue? Any suggestions would be greatly appreciated.