Building a Todo App with Vue.Js [Part 3]
Welcome to #Part 3 of the VueJs tutorial!
If you missed the previous part of this tutorial, Check the link below:
In the previous article, we looked at our project folder structure and understood the purpose of each file in our folder.
In this article, we would take a look at the components.
Let’s first understand what we are trying to build. A Todo application is a simple CRUD app. A CRUD app basically allows a user to perform Create, Read, Update and Delete operations on a resource.
Our Todo application would perform the following functions;
- Allow a user to create a task
- Allow a user to Star and Unstar a task as a favourite
- Allow a user to Delete a task
Components
In the previous article, we learned that VueJs is a component-based framework. Hence, we would be building our todo using several components to make it as a whole. In my application, I have the following;
- Add task (Add a task)
- Favourite (make a task favourite)
- Tasklist (list all task or todos)
Now, let's start writing our Components.
Vue.js uses a template tag for its HTML view. So let’s start with playing in our APP.vue file by just removing the content in the template tag and write “Hello World”. Try reloading and you'll see this;
Creating the AddTask Component
Let's add a new file called AddTask.vue to our components folder We will need to feed data to the main component that will be displaying the list of todos we have. To bring out our design, let’s include Bootstrap and for icons, use FontAwesome
Let’s include it by using the CDN.
Bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" grity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"crossorigin="anonymous"/>FontAwesome
<link href="https://fonts.googleapis.com/css family=Bree+Serif|Fira+Sans|Raleway" rel="stylesheet"/>Now, let’s create the structure of our Addtask component.
Note that, in our template, we had input with some properties. These properties add functionality to the input.
Now that our view is done, let's call it in our App. Vue file ;
Our todo application will have three properties; The title, favourite, and completed(to indicate if the todo is complete or not). Components avail data to their respective templates using a data function. This function returns an object with the properties intended for the template. Now, let’s add some data to our component.
Creating the TasksList Component
Now that we are able to create a task, we must have a view to holding these tasks. Let’s create another file named TasksList in our component folder. This is solely going to be a view so let’s create our content like this;
Yes! we added some style to it. Now we are able to display any task created. Do not forget to call your tasklist component in your App.vue file like this;
So far, this is what we have built.
Looks like we are getting somewhere right?
Storing tasks
Now, I wanted to be able to store my todos like how a playstore app would store it for me whenever I opened it. So this is what I did. To store these tasks added, I used local storage to keep these todos such that, when you exit the application, it still has your previous task. Even on refresh, you have your tasks intact. Let’s see how this is done.
This was done in my addtask file. You’ll see I have a watch method below my code. This watches for a new todo that is added and saves it in my “todos”.
Creating the Favorite Task Component
With this, we are going to make a task our favourite using our star icon. This is to prioritize a task to tackle first. Let’s see how this can be done.
In the above code, we created functions to make a task favorite and remove it from the list of favorite tasks. Dont forget to add it to the App.vue file.
Delete a Task Using Splice
Using our delete icon, we would be able to delete a task. This has already been added to the main view so the next thing, we’ll be to add a method to the component class to handle the icon click. This method will trigger an event removetodo to the TodoList Component and pass the current Todo to delete. We will add an event listener to the delete icon.
Now, we need an event listener to delete the task in the task list view. Let’s add this method to your task list component.
Conclusion
We have learned how to initialize a Vue app using the Vue CLI in the previous article. In addition to this, we learned about folder structure, component structure, adding data to components, event listeners and event handlers.
Feedback & comments are welcome! See you in another article. Cheers!
