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

У меня есть несколько вложенных компонентов на странице с родительским компонентом, имеющим @click.native реализация. Поэтому, когда я нажимаю на область, занятую дочерним компонентом (живущим внутри родителя), выполняются оба действия щелчка (например, родитель и все вложенные потомки)

<products>
   <product-details>
       <slide-show>
             <media-manager>
                  <modal-dialog>
   <product-details>
       <slide-show>
             <media-manager>
                  <modal-dialog>
 </products>

Итак, у меня есть список нескольких продуктов, и когда я нажимаю "холст", принадлежащий модальному диалогу - я также получаю @click.native срабатывает на детали продукта, к которому принадлежит модальный диалог. Было бы неплохо иметь что-то вроде @click.native.stop="code", Это возможно?

Прямо сейчас я должен сделать это:

@click.native="clickHandler"
and then 

  methods: {
    clickHandler(e) {
      e.stopPropagation();
      console.log(e);
    }

код

<template>
  <div class="media-manager">
    <div v-if="!getMedia">
      <h1>When you're ready please upload a new image</h1>
      <a href="#"
         class="btn btn--diagonal btn--orange"
         @click="upload=true">Upload Here</a>
    </div>
    <img :src="getMedia.media_url"
         @click="upload=true"
         v-if="getMedia">
    <br>
    <a class="arrow-btn"
       @click="upload=true"
       v-if="getMedia">Add more images</a>
    <!-- use the modal component, pass in the prop -->
    <ModalDialog
      v-if="upload"
      @click.native="clickHandler"
      @close="upload=false">
      <h3 slot="header">Upload Images</h3>
      <p slot="body">Hello World</p>
    </ModalDialog>
  </div>
</template>

<script>
import ModalDialog from '@/components/common/ModalDialog';
export default {
  components: {
    ModalDialog,
  },
  props: {
    files: {
      default: () => [],
      type: Array,
    },
  },
  data() {
    return {
     upload: false,
    }
  },
  computed: {
    /**
     * Obtain single image from the media array
     */
    getMedia() {
      const [
        media,
      ] = this.files;

      return media;
    },
  },
  methods: {
    clickHandler(e) {
      e.stopPropagation();
      console.log(e);
    }
  }
};
</script>

<style lang="scss" scoped>
.media-manager img {
  max-width: 100%;
  height: auto;
}

a {
  cursor: pointer;
}

</style>
Источник

1 ответ

Вы проверили руководство? https://vuejs.org/v2/guide/events.html

Есть @click.stop="" или же @click.stop.prevent=""

Так что вам не нужно использовать это

methods: {
    clickHandler(e) {
      e.stopPropagation();
      console.log(e);
    }
  }
Источник

Во Vue модификаторы могут быть связаны. Итак, вы можете использовать такие модификаторы:

@click.native.prevent или @click.stop.prevent

<my-component @click.native.prevent="doSomething"></my-component>

Проверить события

Источник

У меня такая же проблема. Я исправил проблему с помощью следующего:

<MyComponent @click.native.prevent="myFunction(params)" />
Источник
Другие вопросы по тегам