Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue.js - What is the self modifier

Tags:

events

vue.js

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.

like image 734
Gary Avatar asked Mar 13 '17 12:03

Gary


People also ask

What is modifiers in VueJS?

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.

What is $V in VueJS?

$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.

What does V cloak do?

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.

What is click prevent in VueJS?

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.


1 Answers

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.

  1. First the child handler is called.
  2. 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.

like image 183
Srinivas Damam Avatar answered Oct 27 '22 06:10

Srinivas Damam