![]() ![]() Now that we know how to intercept and create a new event, let’s learn how to alter and prevent the default behavior of an event. In the code block below, we’ll update the message displayed by showAlert by concating Hello with any text passed in the showAlert function: However, we could improve on this code by adding more context to the function. In the code block above, we pass a message to the showAlert method directly from the v-on directive. For example, let’s consider an alert fired onclick: In Vue, you can use methods called on the element’s v-on directive, which will contain complex logic that will be executed whenever the event is fired. You should review and experiment with these to make sure your design is as intuitive as possible for the user. ![]() There are more events described in the Vue documentation that you can choose from when designing your application. Let’s review a few other popular types of events: Mouse events In our examples so far, we’ve listened to events occurring onclick. We’ve called ours eventHandler and used a shorthand for the v-on directive: Next, we’ll bind an expression to the directive, which is typically a method you want to use to handle the event. We also added an argument to the v-on directive, which is the name of the event we want to handle. In both examples above, we added the v-on directive to the DOM element to intercept its event: In the code block below, we’ll listen to a click event on a button, then change the button’s text: Īlternately, we can call a function to show an alert using the v-on directive: With Vue’s native directive v-on, you can listen to the browser’s native DOM events. Let’s get started! Create inline eventsįirst, let’s look at a common use case of event handling in Vue, creating inline events. To understand this tutorial, you should be familiar with events in JavaScript. We’ll learn how to change or prevent an element’s behavior by listening to the event, intercepting it, and handling it using the methods described below. In this article, we’ll cover the basics of handling events in Vue, and we’ll learn how to apply event handling in a real-world application. Adding these types of events provides a rich UX for the end user. There are several different ways to handle events in Vue, but the best solution will depend on the type of event you are listening to, how you want to react to the event, and what you hope to achieve with the event.įor example, if a user clicks a button, submits a form, or even just moves their mouse, you might add a reaction, like showing an animation or calling a function. To drive these types of interactions on our website or web application, we can use event handling. ![]() When building a dynamic website, you need to listen for different types of events. In my spare time, I contribute to open source projects. I am also passionate about web accessibility and building communities. In order to prevent the default action of the form, we can use the event modifier prevent.Amarachi Amaechi Follow I am a frontend developer with a passion for designing clean and intuitive applications for the web and an eye for design with a user-driven approach to development. We can remove the events from the button and the input field, since the form will be taking care of those. On our form, let's add v-on:submit="add Dinos." Let's add v-on:keyup.enter, and set it equal to "addDinos." Let's make this more accessible by wrapping these elements in a form element. We want to make it so that the user can just press enter from the input field, to add that amount of Dinosaurs. Let's change our button text to reflect the amount of Dinosaurs being added. Now, we can type a number into the input field, and click the button to add that amount to our total. Let's change our click event on the button to "addDinos". We'll add an input field of type="number" and set v-model to the "amount" attribute on our component. Let's add v-on:click, and set that ="total += 1." Now, when we click the Add Dinosaur button, our total is incremented by one. ![]()
0 Comments
Leave a Reply. |