Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

43
Views
Infinite loop when trying to sort array in v-for

I'm trying to sort an array in a v-for (I also tried to inline it). The issue is that the sorting method is being called too many times, appearing to be infinite.

<div v-for="asset in sortBinaries(props.row.assets)" :key="asset.url">
</div>
sortBinaries(binaries) {
  return binaries.sort((a, b) => this.fieldSorter(a, b, ['arch', 'type']));
},

fieldSorter(a, b, fields) {
    var dir = [], i, l = fields.length;
    
    fields = fields.map(function(o, i) {
      if (o[0] === "-") {
        dir[i] = -1;
        o = o.substring(1);
      } else {
        dir[i] = 1;
      }

      return o;
    });

    for (i = 0; i < l; i++) {
        var o = fields[i];

        if (a[o] > b[o]) 
          return dir[i];
        if (a[o] < b[o]) 
          return -(dir[i]);
    }
    return 0;
}

The v-for is located in a detail slot of a Buefy table. So I need the reference to the props.row object.

Is there any way to sort the array when displaying, instead of treating all data first?

The array that I'm sorting is small (6 entries max), but the whole set can get bigger.

9 months ago · Santiago Trujillo
1 answers
Answer question

0

use computed instead of sort inline

For infinite loop, if you use sort inline, everytime this template render, the sort function inline will be invoked.

Use computed to sort your data is a good idea. Your templated will rerender just after computed changed.

<div v-for="asset in sortedBinaries" :key="asset.url">
computed: {
  sortedBinaries() {
    return this.row.assets.sort((a, b) => this.fieldSorter(a, b, ['arch', 'type']));
  }
}
9 months ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.