Vue Sort List

Posted on  by admin

Modified3 years, 11 months ago. I've been working with vue js 1.27 on a project and I need to be able to sort a list by numeric values, Alphabetic and reverse order. I've been trying this all day with not really much progress. I've left some of my previous code in my code sample to let you know what I've already attempted. 33 gold badges2222 silver badges4646 bronze badges. 4646 bronze badges. Here is a fiddle with working functionality to sort and reverse the order of your array.

For reverse I just used the built in reverse() Javascript function. For the alphanumeric sort I borrowed the solution from this answer:

Improve your user’s access to the relevant data

The built in reverse() function is straightforward so I will elaborate on the sortAlphaNum() sort function.

That function is passed into the sort() function and must return either 1, 0, or -1 to indicate if the objects passed in should be moved in a particular direction in the array.

The variables reA and reN are regexes to identify alphabetic and numeric characters, respectively. First the function removes all alphabet characters from the titles of the two objects passed in and compares them for equality.var aA = a.title.replace(reA, ""); andvar bA = b.title.replace(reA, "");. If they are not equal then it means we have alphabet characters (as opposed to just numeric input) and we can sort them accordingly.return aA > bA ? If the titles with alphabet characters stripped are equal (if(aAbA)) then we remove numeric digits from the object titles (leaving non-numeric characters).var aN = parseInt(a.title.replace(reN, ""), 10);var bN = parseInt(b.title.replace(reN, ""), 10);.

Then we compare the resulting variables and return the appropriate sorting value (1, 0, -1).return aNbN ?

0 : aN > bN ? 11 gold badge1414 silver badges2121 bronze badges.

2121 bronze badges.

Not the answer you're looking for? Browse other questions tagged listsortingvue.js or ask your own question.