How to Call Multiple Functions with @Click in Vue?

[ad_1]

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.

Ezoic

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:

Ezoic

<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.

Ezoic