[Vuejs]-Vue.js Modifiers Chain

You can check this example:
https://jsfiddle.net/50wL7mdz/39994/

If you use @click.prevent.self, you can’t click on anything. It prevents all click.
If you use @click.self.prevent, it only prevents when you click on <a> element, we can still click on choose file to upload file

Example illustrates difference in chain order

<div id="app">
  <a href="https://stackoverflow.com" @click.self.prevent target="_blank">Stackofervlow!
    <span :style="{ background: 'yellow', width: '100px', height: '100px' }">span</span>
  </a>
</div>

new Vue({
  el: '#app'
});

@click.self.prevent

1. If you click on span, stackoverflow will open.
2. If you click on a, stackoverflow will not open.

@click.prevent

1. If you click on span, stackoverflow will not open.
2. If you click on a, stackoverflow will not open.