Event Handling in VueJS

Event Handling is an important aspect of any javascript application. Let’s learn how we can handle user events in VueJS.

Problem: You want to capture user events (such as mouse clicks, or keyboard keypress) and perform some action based on the event.

Solution: We’ll build a simple VueJS Application which has two buttons for increasing and decreasing the counter.

    var app = new Vue({
        el: '#app',
        data: {
            count: 0

We have initiated a Vue instance that binds to the element with an id app and we have instantiated a single data property named count.

Livewire Component Library
   <div id="app">
         <button v-on:click="count += 1">Increase</button>
         <button v-on:click="count -= 1">Decrease</button>

We have displayed the counter inside the h2 tag using mustache brackets and we have used two buttons, one for increasing the count and another for decreasing the count.

Get special discount by using coupon code 5Balloons for hosting your Laravel / Wordpress websites on Digital Ocean using Cloudways. Follow this Cloudways Affiliate URL to apply the discount code and get the offer

Notice the new directive v-on following the event which we are looking to capture in this case it’s click, and inside the quotes, we have written the logic of what needs to happen when the user clicks on the button, In one case we have increased the counter and in other, we have decreased it.



In this example, we have written the event handling logic inside the element itself, which would not be feasible for handling large and complex logics, next up we’ll see VueJS methods and how we can invoke methods on a user event.

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer