Как остановить событие клика по компоненту от пузыря с VueJS? - PullRequest
Новая
       22

Как остановить событие клика по компоненту от пузыря с VueJS?

0 голосов
/ 05 июля 2019

Похожие: VueJS: @ click.native.stop = "" возможно?

Я прошел через Модификаторы событий Vue , я пробовал всесочетание и не может понять, почему ни один из связанных примеров не работает.

Я пробовал: click.native.prevent.stop, click.native.prevent, click.native.stop, click.native.self и так далеедалее.

Это не останавливает распространение события. 

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>

1 Ответ

1 голос
/ 05 июля 2019

Похоже, что вы используете два счетчика (счетчик, значение). Первый увеличивается на counter++, а второй (значение) - на событие valPlus в родительском элементе.

Я не вижу, где происходит распространение. Если вы нажмете кнопку, компонент btn выполнит counter++, а родительский элемент выполнит метод valPlus. Это не распространение, это два отдельных события в одном действии.

Если вам нужно только одно поведение, вы можете просто удалить @click.native.stop, и счетчик btn все равно будет работать. Вы можете использовать $ emit на кнопке, чтобы передать счетчик родителю, если это желаемый результат. 

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