We will continue our to-do list project or you can create a new Vue project with Vue CLI, as learned in the 'Creating your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem.
Follow these steps to add a set of filters and sorts into your list:
- In the App.vue file, at the <script> part, we will add new computed properties; those will be for sorting and filtering. We will add three new computed properties, baseList, filteredList, and sortedList. The baseList property will be our first manipulation. We will add an id property to the task list via Array.map. As JavaScript arrays start at zero, we will add 1 to the index of the array. The filteredList property will filter the baseList property and return just the unfinished tasks, and the sortedList property will sort the filteredList property so that the last added id property will be the first displayed to the user:
<script>
import CurrentTime from "....
