mounted() function

[CryDeTaan]

Would someone please help me understand what is happening with the mounted() function:

I notice popupItem is set to $el but popupItem is never defined.

mounted () {
    // prevent click outside event with popupItem.
    this.popupItem = this.$el
  },

[penance316]

This is used if the element that is opening (model, select box etc) is already outside of the element with the v-click-outside directive on.

In a situation something like this (ignore any syntax errors its just an example) where the div with the directive is not actually the parent of the element that will be opened/closed.

        <div
          v-click-outside="setOpen = false"
          @click="setOpen = true"
        >
        </div>

        <div
          ref="poppedUpItem"
          :class="{ 'select-hide': !setOpen }"
        >
             Some popup to show here
        </div>

This library has a function that checks if the this.popupItem element is clicked and if so then don't run the click outside logic.

Hope that helps explain it.