Creating and Calling Methods in Response to Events

Hello, students! Welcome to Lesson 3 of Event Handling in Vue.js. Today, we will learn how to create and call methods in response to events.

Recap

In the previous lessons, we learned what events are and how they are essential for event handling. We also learned how to use the v-on directive to listen to events.

What are Methods?

Methods are functions defined within a Vue.js component. Methods can be called from anywhere within the component, including in response to events.

How to Create Methods

To create a method, we use the following syntax:

methods: {
  myMethod: function() {
    // Method code
  }
}

Where:

• myMethod is the name of the method.
• function() is the method definition.

Example

Let’s see an example of how to create a method:

methods: {
  activateButton: function() {
    // Activate the button
  }
}

Calling Methods

To call a method, we use the following syntax:

<element v-on:event="myMethod">

Where:

• event is the name of the event you want to listen to.
• myMethod is the name of the method you want to call.

Example

Let’s see an example of calling a method in response to an event:

<button v-on:click="activateButton">Activate</button>

In the example above, the activateButton() method will be called when the user clicks the button.

Passing Parameters to Methods

You can pass parameters to methods using the following syntax:

<element v-on:event="myMethod(parameter1, parameter2)">

Where:

• event is the name of the event you want to listen to.
• myMethod is the name of the method you want to call.
• parameter1 and parameter2 are the parameters you want to pass to the method.

Example

Let’s see an example of passing parameters to a method in response to an event:

<input v-on:input="changeValue(value)">

In the example above, the changeValue() method will be called when the user changes the value of the input element. The changeValue() method will receive the new value of the input element as a parameter.

Conclusion

The ability to create and call methods in response to events is an essential skill for any Vue.js developer. With this knowledge, you can create Vue.js applications that dynamically respond to user actions.

In the next module, we will learn about event modifiers. Event modifiers allow you to modify the behavior of an event.

Challenge

Here’s a challenge for you:

• Create a Vue.js application that displays a list of tasks. Each task should have a “completed” button. Clicking the button should mark the task as completed, and the taskCompleted() method should be called.

Good luck!

Tip

You can use the event.target method to access the element that triggered the event.