Advent Of Vue 2022

If you didn't get here from an email, read this section! Skip it otherwise.

Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24 via a dedicated newsletter. If you'd like to receive more of these puzzles in the future, go ahead and sign up!

Problem description

Fortunately, we got lucky this year and were gifted a lot of presents! But look at this chaos... Wouldn't it be nice if we could sort all of our presents by their dimensions?

• We want to sort the presents by their surface area (width * height, small to big).
• Add a button with the name Toggle sort that makes it possible to toggle sorting.
• Hint: use computed() for best results.
• Hint: you can run the tests with npm run test to see if your solution matches the specification.

Example of a solution in action

https://aov-sort-presents.netlify.app/

Author

This challenge was created by Markus Oberlehner.

If you like how, in this example, you can check your implementation with an existing test, you might be interested in my book/newsletter about how to write good tests for Vue applications.

Credits

Based on a Stackblitz project by tony19