How to filter todo items? Vue 3 Composition API
This post is not a Vue Todo App tutorial. There are plenty of them on the Internet, so you can easily find something to play around with. It is also not a post about Vue 3 Composition API. My article “How to validate a custom form component in Vue 3?” is the most readable one on my blog, but I still need to develop my skills in using Composition API. To achieve this, I created a Vue 3 project based on the post by Burak Gür. I styled it differently, but there was one more thing I wanted to improve — to add a possibility to filter todo items by their types. I’ll explain how I managed to achieve this in 3 simple steps. If you want to see the final result, please, visit my stackblitz project.
Step 1. Create ref objects to store filters
First, we need to create a ref object to store an array of filters. There are four: Personal, Work, Other, and All. Besides, we should add another ref object for an active filter, All by default. The last thing is to return our refs from setup.
Step 2. Create a filter function
Here is where all the magic is happening. We have to create a function that changes the active filter value to the option chosen by a user. The code seems pretty straightforward, but don’t forget to use the value property of the ref object and return the function.
Now let’s take a look at how it looks in the template. We use the v-for loop to render a paragraph with a span inside it. Each span holds a filter; when you click on it, the filterTodo function fires, and the active filter changes. Additionally, we use Vue class binding to highlight the active filter.
Step 3. Create a computed to display filtered todos
Although the syntax is a bit different, computed properties are still the best option when you need to change the presentation of existing data. So, we take an array of all todos and then use the JavaScript filter method that creates a new array with all elements, which type equals the active filter value. If the value of the active filter is All, we return all todos.
Then in the template, we render a todo list based on the getTodos computed. Each item consists of the description, label, and remove button. Notice that a removeTodo function also uses a filter method, not a splice as it was in the original code. It works thanks to the additional field for the unique todo id.
Bonus. Show a message if there is no task of some type
It might be appropriate to tell a user that there are no tasks of some type so far. To achieve this, we should create one more computed and render it when the length of getTodos equals zero.
That’s it. I hope you found this post helpful. Please, leave a comment if you have any questions or suggestions. I want to thank my colleague Serhij Hladkov, who helped me with this project.
Meanwhile, it is the 46th day of Ukraine’s heroic resistance against full-scale Russian aggression. The news about Russia’s war crimes devastated me so that I could hardly work and study. It is impossible to stay aside, but it is still possible to help. Please, share this link, donate to Ukrainian Armed Forces, and support Ukrainian refugees. If you still hesitate, watch this video:
