Prevent event bubbling in Vue

vue.js click event-bubbling

eozzy · Feb 15, 2018 · Viewed 24.2k times · Source

<div id="largeArea" v-on:click="do_X">
    <button>Button</button>
</div>

So I have this issue in Vue where I don't want "do_X" to trigger when I click on the button, although its a part of the largeArea.

Answer

I found that using the 'stop' event modifier on the child element worked for me. eg

<div id="app">
  <div id="largeArea" @click="do_X">
    <button @click.stop="do_Y">Button</button>
  </div>
</div>