Question

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

Answer question

Find remote jobs

Accepted Answer · 2022-04-19T20:55:02.101Z

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']));
  }
}