In Vue.js, you can call multiple functions with @click by either directly invoking multiple functions or using an inline function to call them.
How to Call Multiple Functions with @Click in Vue?
Let’s get started different ways to perform call multiple functions with @click in vue js with examples:
- Method 1 – Inline Multiple Function Calls
- Method 2 – Multiple @click Attributes
- Method 3 – Inline Function with Multiple Calls
- Method 4 – Passing Event Object and Arguments
Method 1 – Inline Multiple Function Calls
You can call multiple functions directly within the @click attribute by separating them with semicolons. Here’s how you can do it:
<div @click="funFirst('foo'); funSec('bar')">Click me</div>
In this example, when the div is clicked, both funFirst and funSec will be called with the respective arguments.
Method 2 – Multiple @click Attributes
Another approach is to have multiple @click attributes on the same element. Each @click attribute will call a different function. Here’s an example:
<div @click="funFirst('foo')" @click="funSec('bar')">Click me</div>
Method 3 – Inline Function with Multiple Calls
You can also use an inline function to call multiple functions within a single @click attribute. Here’s how you can do it:
<div @click="() => { funFirst('foo'); funSec('bar'); }">Click me</div>
Method 4 – Passing Event Object and Arguments
If you need to pass the event object to your functions along with other arguments, you can use the following approach:
<div @click="() => { funFirst($event, 'foo'); funSec($event, 'bar'); }">Click me</div>
Conclusion
That’s it; you have learned how to call multiple functions when the specified element is clicked in a Vue.js application.
