vue.js list items not in correct order

Question

I made a list in vue.js where the order is not how I expect. A code pen is available here

EDIT: Ahhhh, it looks like the problem is only in Chrome, I can not reproduce it in Firefox and Edge

All item get sorted correct (green) expect the first one (red):

The list in the markup is defined like so:

<li v-for="image in orderedPhotos" v-bind:key="image.imageKey" style="border: solid 1px black;margin: 5px">;

and the orderedPhotos variable is a computed vue.js variable:

computed: {
  orderedPhotos() {
    return this.photos.slice(0).sort((x, y) => x.uploadDate < y.uploadDate);
  },
}

Your comparator is wrong. It should return an integer, not a boolean — Phil, Apr 17 '18 at 01:56
thanks @Phil!, still strange that it works in Edge and Firefox :-) @CertainPerformance I added slice(0) because of the vuejs-eslint rules — Stef Chäser, Apr 17 '18 at 02:00
@CertainPerformance `slice(0)` would be to clone the original array so as not to mutate it via `sort()` — Phil, Apr 17 '18 at 03:50
I'd say the issue is how each browser treats the _equal_ comparison. When your boolean expression is `false`, that is equivalent to `0` (values are equal). See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description — Phil, Apr 17 '18 at 03:57

score 1 · Accepted Answer · answered Apr 17 '18 at 02:01

1

You are returning a boolean. Do:

computed: {
  orderedPhotos() {
    return this.photos.slice(0).sort((x, y) => x.uploadDate - y.uploadDate);
  },
}

answered Apr 17 '18 at 02:01

acdcjunior

1 Answers1