Event Handling in Vue
- Tram Ho
As in the previous post, we have rendered the list of users. Now we want to add a user to the list of users, how do we go to find out below.
Event Handling
Listen to Events
In Vue.js we can use the v-on directive to listen for DOM events and execute JavaScript when these events are fired.
Example: Listen to the click event on the DOM.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="app"> <button v-on:click="counter++">Click</button> <p>Click vào button lần thứ {{ counter }}</p> </div> <script src="https://unpkg.com/vue@2.4.2" type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { counter: 0, } }); </script> |
Result:
v-on:click in the above code is equivalent to onClick attribute on HTML. Events can be used like:
- click
- hover
- mouserover
- scroll
- drop
- …
You have a reference card list Dom event here
Event Handling method
If we bind a method after the event name then we can run the code you write in that method.
For example, as simple as you want to print a message console, you can also do the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="container mt-4" id="app"> <button v-on:click="handleSubmit">Xin chào</button> </div> <script src="https://unpkg.com/vue@2.4.2" type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { counter: 0, }, methods: { handleSubmithandleSubmit() { console.log("Xin chào mọi người"); }, }, }); </script> |
- How to use Event Object As you all know, when an event occurs, javascript will create an event object, it contains information related to the event, such as mouse position relative to the browser, mouse position relative to The current element emits the event. In Vue, when we use directives, this auto object has been passed into the event handler function for use.
1 2 3 4 | handleSubmit (event) { console.log(`The button was clicked at ${event.timeStamp}.`); } |
Event Modifiers For example, when you submit a form, usually the form submission methods will redirect before running the code in the event handling method. To prevent this transfer from happening, we will do the following in the event handling method:
1 2 3 4 | handleSubmit (event) { event.preventDefault(); } |
Vue provides us with event modifiers with directives.
1 2 | <form @submit.prevent="handleSubmit"></form> |
Some of the event modifiers can handle different situations
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
Custom events
Vue is component-oriented, so can we make a component emit its own event? The answer is absolutely world,.
For example, we want a child component to send data to the parent component. Here we cannot use props by props because it is only allowed from parent to child, if you intentionally change that data in the child component, it will give an error avoid . So how can the child component tell the parent component so that the parent component can change that data.
To do this, we will call this.$emit(“my-event”) from the child component when we want to trigger some event to change the data of the parent passed down to the child. For example, if we want to increase the counter by one unit, we will do the following:
ParentComponent
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template> <div> <child-component @increase="handleEvent" :counter="counter" /> </div> </template> <script> export default { data() { return { counter: 1, } }, methods: { handleEvent() { this.counter += 1; } } } </script> |
ChildComponent
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template> <div> <p>{{ counter }}</p> <button @click="increase">Increase</button> </div> </template> <script> export default { props: { counter: Number, }, methods: { increase() { this.$emit("increase"); } }, }; </script> |
Event bus
As you can see above, the child component can emit events on the parent component. But if we want that child component to emit on any component To do this, you can use event bus. This is where we create a Vue instance so we can call the event on any component that imports it. You just understand it is a means to help the component can perform emit on any component that it imports.
First you create a js file in any folder in your project with the following content:
eventBus.js
1 2 3 | import Vue from "vue"; export default new Vue(); |
Header.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div class="header "> <div class="m-auto"> <button @click="myMethod">Call method</button> </div> </div> </template> <script> import eventBus from "./../assets/js/eventBus"; export default { name: "CompHeader", methods: { myMethod() { var data = { title:'push data event bus' } eventBus.$emit("my-event",data); } } }; </script> |
Finally import this js file into a component that can listen for this event when the other child component emits to be able to catch it. I suggest you to use lifecycle hook created because you can access Vue instance of component here. And then you use the $on method of the bus to listen for the event: the first parameter is the event name, the second parameter is its callback.
File handle event
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div class="hello"> <Header /> </div> </template> <script> import Header from "./Header.vue"; import eventBus from "./../assets/js/eventBus"; export default { name: "HelloWorld", components: { Header, ComponentA }, created() { eventBus.$on("my-event", (data) => { console.log("my-event called on global event bus "+data.title); }); }, |
This is how components can share data with each other. You can also refer to Vuex for more information. Conclusion You also understand a bit about events and how to handle events in Vue.