How to Create a Simple Todo App with Vue

Welcome Friends, today we are going to create a simple todo app with vue.js and while doing so, we will explore various concepts of vue.js.

So now we know how to create a website or an app using Vue.js. Now let’s convert the app into todo app. Okay! So, what data do we need for creating todo list? At least a list of tasks. We will define tasks field in data object passed to vue and initialize it with an empty array. Then we will create a string field new_task and bind it with the input field to create new tasks.

So, let’s scaffold the HTML and add vue.js as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>An Awesome Vuejs Course Todo App</title>
    <style>
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>My First Awesome Vue Project!</h1>
        <hr>
        <input type="text" v-model="newTask">
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let myVue = new Vue({
            el: '#app',
            data: {
                newTask: '',
                tasks: []
            }
        });
    </script>
</body>
</html>

Here, v-model is a vue directive that instructs vue to perform two-way data binding, i.e., when the value of newTask changes, the value of input field changes and vice-versa.

Now, we want to add new task to the tasks list when we press enter on our input tag. For this we will use yet another directive called v-on . v-on:keypress.enter=addTask() will call the function addTask() that we are going to define in the methods field of data object that we passed to new Vue(). Add the function and call it when enter is pressed as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>An Awesome Vuejs Course</title>
    <style>
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>My First Awesome Vue Project!</h1>
        <hr>
        <input type="text" v-model="newTask" v-on:keypress.enter="addTask()">
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let myVue = new Vue({
            el: '#app',
            data: {
                newTask: 'Mayank Chaudhari',
                tasks: []
            },
            methods: {
                addTask() {
                    if(this.newTask.trim() != '')
                        this.tasks.push({
                            title: this.newTask,
                            done: false
                        });
                    this.newTask = '';
                }
            }
        });
    </script>
</body>
</html>

Have a closer look at addTask() function starting at line 29 in the methods object. We are accessing the field newTask of the data object as this.newTask and it just works fine. If this was plain JavaScript, we would expect this to refer to the methods object and there is no field called newTask in methods object. In this case vue.js actually does the background work and associates all the functions and the data with this keyword.

What the function addTask is doing is that it creates a new task with the value of input as title if it is not empty and sets it to active task. You can now add the tasks to your list, but wait, we yet have no mechanism to display the tasks. To display the tasks we will use list rendering (v-for directive).

It is very simple. We will create an unordered list and use v-for directive on list items as shown below to render the tasks.

#vue #javascript

medium.com

How to Create a Simple Todo App with Vue