CODEWITHSUNDEEP
vue.js
Nicke Manarin
Nicke Manarin

Reputation: 3360

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.

Upvotes: 2

Views: 1074

Answers (1)

Ryan Leung
Ryan Leung

Reputation: 96

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

Upvotes: 4

Related Questions