(Vue.js) modal close event

Question

When I click on the outer area of ​​the modal, I want the same event as the close button of the modal. (Event that closes modal when clicking outside area of ​​modal)

The current progress is that the modal is closed when the close modal button is clicked.

Carousel.vue

<template>
  <div>
    <div v-for="(item, index) in photos" :key="index">
      <div @click="imgClick(item)" style="cursor:pointer;">
        <img :src="item.thumbnail" />
      </div>
      <Modal v-if='item.show' @close="item.show = false">
        <div slot='body'>
          <img :src="item.thumbnail" :class="`img-index--${index}`"/>
        </div>        
      </Modal>
    </div>
  </div>
</template>
<script>
import Modal from './Modal.vue'
export default {
  props: {
    items: { type: Array, default: () => [] }
  },
  data() {
    return {
      photos: {}
    }
  },
  created() {
    this.photos = this.items.map(item => {
      return { ...item, show: false }
    })
  },
  methods: {
    imgClick(item) {
      item.show = true
    }
  },
  components: {
    Modal: Modal
  }
}
</script>

Modal.vue

<template>
  <transition name="modal">
    <div class="modal-mask" @click="$emit('close')">
      <div class="modal-wrapper">
        <div class="app__phone">
          <div class="feed">
            <div class="post">
              <div class="header headroom">
                <div class="level-left">
                  <img src="../assets/imgs/user.gif" class="modal-header-img"/>
                  <div class="user">
                    <span class="username">username</span>
                    <button class="modal-default-button" @click="$emit('close')">Close</button>
                  </div>
                </div>
              </div>
              <slot name="modal-img"></slot>
              <div class="content">
                <div class="content-title">
                  <slot name="modal-tit"></slot>
                </div>
              </div>
            </div>
          </div> 
        </div>
      </div>
    </div>
  </transition>
</template>

When I add a click event to the bottom <div>, it closes when I click outside the modal, but it closes when I click anywhere in the modal.

<div class="modal-mask" @click="$emit('close')">

And this link has a Fiddle example in the accepted answer to the question.

https://stackoverflow.com/a/58023701/12066654

Solution

You need to add a handler to the outer modal div like so:

<template id="modal">
  <div class="modal" @click.self="close">
    <div class="close" @click="close">&times;</div>
    <div class="body">
      <slot name="body" />
    </div>
  </div>
</template>

Comments

[David Weldon]

Are you rendering the modal yourself of with some kind of CSS library like bootstrap?

[ddon]

@DavidWeldon Sorry. I will upload the code.

[ddon]

I added Modal.vue code to the question. Sorry but could you please reconfirm the problem?

[David Weldon]

Sorry - I forgot to include the self modifier. With that change, does your code work?

[ddon]

I solved the problem using self. Thank you for your help :)