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')

CodePudding user response：

This question is not about vuejs as it is about vanila js. To find the max object by property, you just have to compare all objects with each other by this property.

const 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}];

const maxBought = posts.reduce((max, item) => 
  (max.bought > item.bought ? max : item), posts[0] ?? undefined);

console.log(maxBought);

.as-console-wrapper { max-height: 100% !important; top: 0; }

CodePudding user response：

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