Adding an event listener to an element

The most common method of parent-child communication in Vue is through props and events. In JavaScript, it's common to add event listeners to elements of the DOM tree to execute functions on specific events. In Vue, it's possible to add listeners and name them as you wish, rather than sticking to the names that exist on the JavaScript engine.

In this recipe, we are going to learn how to create custom events and how to emit then.

Getting ready

The prerequisite for this recipe is Node.js 12+.

The Node.js global objects that are required for this recipe are as follows:

• @vue/cli
• @vue/cli-service-global

To start our component, we can create our Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe, or use the project from the Creating an input form with two-way data binding recipe.

How to do it...

Follow these steps to add an event listener to an element in Vue:

1. Create a new component or open the TaskInput.vue file.
2. At the <template> part, we are going to add a button element and add an event listener to the button click event with the v-on directive. We will remove the {{ task }} variable from the component because from now on, it will be emitted and won't be displayed on the component anymore:

<template>
  <div class='cardBox'>
    <div class='container tasker'>
      <strong>My task is:</strong>
      <input 
        type='text' 
        v-model='task' 
        class='taskInput' />
      <button 
        v-on:click='addTask'>
            Add Task
      </button>
    </div>
  </div>
</template>

3. On the <script> part of the component, we need to add a method that will handle the click event. This method will be named addTask. It will emit an event called add-task and send the task to the data. After that, the task on the component will be reset:

<script>
export default {
 name: 'TaskInput',
 data: () => ({
 task: '',
 }),
  methods: {
    addTask(){
      this.$emit('add-task', this.task);
      this.task = '';
    },
  }
};
</script>

4. In the App.vue file, we need to add an event listener bind to the component. This listener will be attached to the add-task event. We will use the shortened version of the v-on directive, @. When it's fired, the event will call the addNewTask method, which will send an alert stating that a new task was added:

<template>
  <div id='app'>
    <current-time class='col-4' />
    <task-input 
      class='col-6'
      @add-task='addNewTask'
    />
  </div>
</template>

5. Now, let's create the addNewTask method. This will receive the task as a parameter and show an alert to the user, stating that the task was added:

<script>
import CurrentTime from './components/CurrentTime.vue';
import TaskInput from './components/TaskInput.vue';

export default {
  name: 'TodoApp',
  components: {
    CurrentTime,
    TaskInput,
  },
  methods: {
    addNewTask(task) {
      alert(`New task added: ${task}`);
    },
  },
};
</script>

6. To run the server and see your component, you need to open a Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm run serve

Remember to always execute the command npm run lint --fix, to automatically fix any code lint error.

Here is the component rendered and running:

How it works...

The HTML events are read by Vue with the v-on event handling directive. When we attached the v-on:click directive to the button, we added a listener to the button so that a function will be executed when the user clicks on it.

The function is declared on the component methods. This function, when called, will emit an event, denoting that any component using this component as a child can listen to it with the v-on directive.

See also

You can find out more information about event handling at https://v3.vuejs.org/guide/events.html.