Vue.js Task List using Vue Material

My favorite JavaScript framework is Vue.js. I’ve used Angular and React, but I prefer Vue.js. It seems more intuitive and simpler to me. However, if you’re looking for a job as a front-end developer, React and Angular are far more popular right now.

Vue.js and JavaScript Basics

Although I’m using Vue Material for aesthetics, don’t let the custom components complicate things.

I am storing the tasks in an array.

tasks: [
    {
        id: 0,
        text: 'Learn Vue.js',
        completed: true
    },
    {
        id: 1,
        text: 'Try Vue Material',
        completed: false
    },
    ...
]

Displaying an array of items (iterable) using Vue.js is done using v-for.

<element v-for="(task, index) in tasks" :key="task.id">
    {{ task.text }}
</element>

Reacting to a native click event on an HTML element using Vue.js is done using the v-on:click directive, which is simplified as @click. If you’re using a custom component, you will often have to specify the .native modifier if the component doesn’t emit it as a custom event.

<button @click="addTask">Add</button>
<button @click="removeTask(index)">Remove</button>

In this case addTask and removeTask are usually methods on the Vue instance.

Adding and removing tasks is as simple as responding to events on the UI and altering the underlying array accordingly. In JavaScript, we can use the splice and push methods on the array prototype to remove and append items.

let friends = ['tom', 'sam', 'bill', 'harry'];
console.log(friends);
> ['tom', 'sam', 'bill', 'harry']

// remove bill
friends.splice(2, 1);
console.log(friends);
> ['tom', 'sam', 'harry']

// add ken
friends.push('ken');
console.log(friends);
> ['tom', 'sam', 'harry', 'ken']

I recommend viewing the Vue.js documentation for more detail.

Vue Instance

Here is the Vue instance for the task list app.

new Vue({
    el: "#app",
    data: function() {
        return {
            title: "david hayden",
            card: {
                title: "Tasks",
                subTitle: "A Vue.js Sample"
            },
            tasks: [
                {
                    id: 0,
                    text: 'Learn Vue.js',
                    completed: true
                },
                {
                    id: 1,
                    text: 'Try Vue Material',
                    completed: false
                }
            ],
            newTask: "",
            nextId: 2
        }
    },
    methods: {
        addTask: function() {
            if (this.newTask.trim() === "")
                return;

            this.tasks.push(
                {
                    id: this.nextId,
                    text: this.newTask,
                    completed: false
                }
            );

            this.newTask = "";
            this.nextId++;
        },
        removeTask: function(index) {
            this.tasks.splice(index, 1);
        }
    },
    mounted: function() {
        this.$nextTick(function () {
            var newTask = document.getElementById("newTask");
            newTask.focus();
        })
    }
})

Vue Material

Vue Material is optional and just makes it look nicer. Here is the Vue.js Task List App.

Vue.js and Vue Material Task List

Contents