I am trying to find which of the posts has the most bought… I’ve been trying for some time now, and this is my latest draft. I would really like to know if there is a smart way to do this through Vue js. Most of my struggles come from navigating the array.
My first thought was to merge the different numbers (bought) together and then determine the biggest one, whereafter trying to locate the number, but with no luck.
Is there anyone who could help me?
Vue.createApp({
data() {
return {
postsPopular: null,
sortMethod: 2,
posts: [
{
id: 1,
theme: 'Todos',
name: 'Arcoiris',
amount: '1',
bought: 0
},
{
id: 2,
theme:'Clubs',
name: 'Club America',
amount: '2',
bought: 10
},
{
id: 3,
theme:'Clubs',
name: 'Club Chivas',
amount: '3',
bought: 0
},
{
id: 4,
theme:'Regionales',
name: 'Sabucan Pitahaya',
amount: '4',
bought: 0
},
{
id: 5,
theme:'Regionales',
name: 'Sabucan',
amount: '5',
bought: 0
},
{
id: 6,
theme:'Frutas',
name: 'Sandia',
amount: '6',
bought: 0
},
{
id: 7,
theme:'Regionales',
name: 'Xtabay',
amount: '7',
bought: 0
}
],
}
},
methods: {
themeActive() {
//console.log(this.sortMethod.id.length);
},
},
computed: {
postsActive() {
if (this.sortMethod == '1')
{
return (this.posts.slice(-7));
}
else if (this.sortMethod == '2')
{
this.postsPopular = this.posts.filter((item) => {
[i] = item.bought;
console.log(i);
popArray = concat(i);
popArray.reduce(function(previousValue, currentValue, currentIndex, popArray) {
return newPreviousValue;
}, 0);
});
console.log(postsPopular);
}
else if (this.sortMethod == '3')
{
}
else if (this.sortMethod == '4')
{
}
else if (this.sortMethod == '5')
{
}
},
rows() {
}
}
}).mount('#page2')
Advertisement
Answer
You can create a computed property that returns the most bought object from the lists. To get the most bought object use js Array.prototype.reduce() method.
computed:{
mostBought(){
return this.posts.reduce((prev,current)=>prev.bought>current.bought?prev:current);
}
}
Here is a link of vue playground