In this tutorial you will learn how to handle events in vuejs 2.0, in last tutorial on vuejs we have learn from very basic steps to get started with vuejs, event handling will be next steps we are going to have user interaction with our application, we will have few basic example to demonstrate few basic events.
If you want learn getting started tutorials you can read from following tutorial links:
VueJS 2.0 data binding, Listing Data, Render Select Field Options
VueJS 2.0 dynamic Attribute binding Class Name binding
Table of Contents
What is Event in VueJS?
It is common concept in programming for the application, whenever user is going to interact with user interface for example click on something or type information or submit the information
Using Events to Call VueJS Methods:
Let’s get started by creating a simple To-List application where we are going to have following features:
- Add Task in to the list
- Remove Task from the list
- Mark Task as completed
<!DOCTYPE html>
<html>
<head>
<title>VueJS 2.0 Todo List</title>
</head>
<body>
<div id="app">
<h2>
VueJS To list Example
</h2>
<input type="text" v-model="task">
<button v-on:click="addTask()">Add Task</button>
<br><br>
<h3>Task ({{ tasks.length }})</h3>
<table v-if="tasks.length > 0">
<tr>
<th>No.</th>
<th>Task</th>
<th>Mark as Completed</th>
<th>Remove</th>
</tr>
<tr v-for="(task, index) in tasks">
<td>
{{ index + 1 }}
</td>
<td>
{{ task }}
</td>
<td>
<button v-on:click="taskCompleted(index)">completed</button>
</td>
<td>
<button v-on:click="removeTask(index)">X</button>
</td>
</tr>
</table>
<h3>Completed ({{ completed.length }})</h3>
<table v-if="completed.length > 0">
<tr>
<th>No.</th>
<th>Task</th>
</tr>
<tr v-for="(task, index) in completed">
<td>
{{ index + 1 }}
</td>
<td>
{{ task }}
</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/vue@2.3.4"></script>
<script>
var app = new Vue({
el: "#app",
data: {
tasks: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5'],
task: '',
completed: []
},
methods: {
addTask: function () {
if (this.task != '') {
this.tasks.push(this.task);
this.task = '';
}
},
removeTask: function (index) {
this.tasks.splice(index, 1);
},
taskCompleted: function (index) {
this.completed.push(this.tasks[index]);
this.tasks.splice(index, 1);
}
}
});
</script>
</body>
</html>Have a look on above code line by line, you will see first thing in the body section we have a text box with the button where we have vuejs event handing, ex. `v-on:click=”addTask()”`. here are are using click event to call addTask() method, next we simply listing data using `v-for` directive.
also, look at the script section where we have added new property call, `methods`, which is used to add vuejs methods.
You can checkout the live example here – VueJS To-Do List Live Example
Conclusion of the tutorial:
What you learned from this tutorial:
- how to handle events in vuejs
- how to create methods in vuejs
- how to call methods with events in vuejs
- how to create a simple todo list application in vuejs
Next Tutorial – How to Use Computed Properties in VueJS
Previous Tutorial – VueJS 2.0 dynamic Attribute binding Class Name binding
Happy Learning!
