click outside is triggered inside the element with v-for

[handhikadj]

go to: https://codesandbox.io/s/unruffled-shirley-0x72r6?file=/src/App.vue

click inside the element. see console

[DaanDL]

Works as intended.

You click inside one of the red boxes, meaning that you don't click in one of the four other boxes, so you get four messages. Click in the white area, and you get five messages, simple as that :-)

If you don't like this behaviour, just wrap it like this:

<div id="app" style="display: flex; gap: 10px">
    <div style="display: flex; gap: 10px" v-click-outside="showClickAway">
      <div
      v-for="(item, index) in myItems"
      :key="index"
      class="my-item">
      {{ item }}
      </div>
    </div>
  </div>