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>

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 <btn> is a <div> with a @click it doesn't fire because the event has been successfully stopped. — skirtle
– skirtle, Commented Jul 5, 2019 at 19:44

eradima · Accepted Answer · 2019-07-05 19:49:05Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related