DEV Community

John Au-Yeung
John Au-Yeung

Posted on • Originally published at thewebdev.info on

Vue 3 — Event Handling

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to handle events in Vue 3 components.

Listening to Events

We can listen to events with the v-on directive, or @ for short.

For instance, we can listen to clicks by writing:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button v-on:click="onClick">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick() {  
            alert("clicked");  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

Enter fullscreen mode Exit fullscreen mode

We added the v-on:click directive to run the onClick method when we click the button.

So we should see an alert when we click the button.

To shorten it, we can write:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="onClick">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick() {  
            alert("clicked");  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

Enter fullscreen mode Exit fullscreen mode

We can put any JavaScript expression as the value of the v-on directive.

Methods in Inline Handlers

We don’t have to bind directly to the method in the expression we pass into v-on .

We can also call the method in there.

For example, we can write:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="onClick('hi')">hi</button>  
      <button @click="onClick('bye')">bye</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick(str) {  
            alert(str);  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

Enter fullscreen mode Exit fullscreen mode

We pass in an argument to the onClick method so that onClick will get the argument and display the message.

To access the event object of the event, we can use the $event object.

For example, we can write:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="onClick('hi', $event)">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick(str, event) {  
            event.stopPropagation();  
            alert(str);  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

Enter fullscreen mode Exit fullscreen mode

to pass in the $event object to our event handler.

Then we can call stopPropagation on it to stop the click event from propagation to parent elements.

This event object is the native event object.

Multiple Event Handlers

We can have multiple event handlers in one expression.

For example, we can write:

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="one($event), two($event)">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          one(event) {  
            console.log("one");  
          },  
          two(event) {  
            console.log("two");  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

Enter fullscreen mode Exit fullscreen mode

to run one and two as event handlers when we click on the button.

Event Modifiers

We can add event modifiers so that we don’t have to call methods like event.preventDefault() or event.stopPropagation() in our event handlers.

The modifiers include:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

These are added to the v-on directive.

For example, to call event.stopPropagation in our event handler, we can write:

<a @click.stop="onClick"></a>

Enter fullscreen mode Exit fullscreen mode

then the click event won’t be propagated to the parent elements.

And if we write:

<form @submit.prevent="onSubmit"></form>

Enter fullscreen mode Exit fullscreen mode

event.preventDefault() will be called when running onSubmit .

Modifiers can also be chained, so we can write:

<a @click.stop.prevent="onClick"></a>

Enter fullscreen mode Exit fullscreen mode

The capture modifier lets us use capture mode when adding an event listener.

And the self modifier only triggers the event handler if the event.target is the element itself.

once will only trigger the event handler at most once.

The passive modifier corresponds to the addEventListener ‘s passive option.

If we add it to the @scroll directive:

<div @scroll.passive="onScroll">...</div>

Enter fullscreen mode Exit fullscreen mode

then the scroll event’s default behavior will happen immediately instead of waiting for onScroll to complete.

passive and prevent shouldn’t be used together since prevent will be ignored.

passive communicates to the browser that we don’t want to prevent the default browser behavior.

Conclusion

We can listen to events with the v-on directives.

It makes many arguments and modifiers.

The post Vue 3 — Event Handling appeared first on The Web Dev.

Top comments (0)