How to stop click event on component from bubbling down with VueJS?

Question

Related: VueJS: @click.native.stop = "" possible?

I've went through Vue's event modifiers, I've tried every combination and cannot understand why none of the chained examples work.

I've tried: click.native.prevent.stop, click.native.prevent, click.native.stop, click.native.self and so forth.

It does not stop the event from propagating.

Vue.component('btn', {
    data: function(){
    return {
      count: 0
    }
  },
    template: '<button v-on:click="count++">click me: {{ count }}</button>',
});

new Vue({
  el: "#app",
  data: function() {
        return {
        value: 0
    }
  },
  methods: {
    valPlus: function(){
        this.value++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ value }}
  <br>
  <btn @click.native.stop="valPlus"></btn>
</div>

Posible double post, check this: [link](https://stackoverflow.com/questions/48798216/prevent-event-bubbling-in-vue) — JC Hernández, Jul 05 '19 at 19:27
Your example doesn't have any listeners on ancestor elements so it doesn't really show whether it's working or not. If I wrap your `` is a `
` with a `@click` it doesn't fire because the event has been successfully stopped. — skirtle, Jul 05 '19 at 19:44

eradima · Answer 1 · 2019-07-05T19:49:05.457

It appears as if you are using two counters (counter, value). The first, is incremented with the counter++ and the second (value) with the valPlus event on the parent.

I don't see where the propagation is happening. If you click the button, the btn component will execute the counter++ AND the parent runs the valPlus method. It isn't a propagation it's two separate events on the same action.

If you only want one behaviour you could just remove the @click.native.stop and the btn counter will still run. You could use $emit on the button to pass the counter up to the parent if that is the desired result.

Vue.component('btn', {
 data: function(){
    return {
      count: 0
    }
  },
 template: '<button v-on:click="count++">click me: {{ count }}</button>',
});

new Vue({
  el: "#app",
  data: function() {
  return {
     value: 0
    }
  },
  methods: {
   valPlus: function(){
     this.value++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ value }}
  <br>
  <btn ></btn>
</div>

How to stop click event on component from bubbling down with VueJS?

1 Answers1