How to Call Multiple Functions with @Click in Vue?

How to Call Multiple Functions with @Click in Vue?

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.

Recommended Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *