I am learning Vue.js. Currently, I'm trying to understand eventing. In Vue, there are Event Modifiers. I understand the purpose of all of them except for the self
modifier. What is the self
modifier? It seems like the stop
modifier does the same thing as self
. When would I use self
?
Thank you for any help. I feel like i have to be misunderstanding something. I just don't see the purpose of self
.
js Event Modifiers help to ignore the common event handling like don't reload the page when the form is submitted and other similar issues. Event Modifiers allow to handle them in the DOM itself.
$v is an object that calls vuelidate (at the time of writing the comment, supported in version Vue. js 2.0), which is intended to check every input, which is made in a non-html form.
The v-cloak directive is a Vue. js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready.
prevent is a modifier for v-on:click . Another handy modifier is . self , which tells Vue to only evaluate v-on:click if the element itself is clicked, as opposed to one of its children. For example, Vue only calls the below v-on:click handler when you click on the outer div , not the inner div .08-Jul-2020.
If a parent node and child node are registered with same type of event then when that type event dispatches then handlers of parent and child are called.
Here is an example fiddle.
Try removing self
from click event modifier of the parent div then click on the child div.
Parent handler is called.
<div class="parent" v-on:click="log('from parent')">
Parent
<div class="child" v-on:click="log('from child')">
Child
</div>
</div>
If you put back self
modifier and clicking on the child div doesn't call the parent handler.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With