How to track click on shadow in modal window using VUE?

Question

JavaScript

There is a modal window, a cross to close it and a shadow. If you hang the handler on the root element of the modal window, then it will close when you click on the window itself, which is not necessary. How to be?

<template>
  <transition name="modal">
    <div v-if="status" class="modal-wrap">
      <div class="inner-wrap">
        <div class="modal-window">
          <div class="close-cross" @click="closeModal">
            <i class="fas fa-times"></i>
          </div>
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

Answer 1

First, google what event bubbling is.
Secondly - have you heard about event modifiers ? It would be necessary to fasten self - this is if on the "shadow". Or stop - on the window.

Answer 2

https://www.npmjs.com/package/vue-click-outside