Elements with a v-if tag are not evaluated as a descendant.

[astarrh]

It seems that anything located in or beneath an element using v-if is disqualified from inheritance.

    <div v-click-away="doAction"> 

        <div id="worksFine">
              DivContent
        </div>

        <div id='disqualified' v-if="someFlag === true">
            This still triggers "doAction" (even with someFlag set to true)
        </div>

    </div>

This was happening in my custom directive as well. It seems that v-if breaks .contains() in some way.

[aralzaim7]

We had the same issue, we found the work around by using v-show instead of v-if tags

[VinceG]

@astarrh @aralzaim7 Can you try removing this return and see if that works

https://github.com/VinceG/vue-click-away/blob/master/index.js#L37

[astarrh]

@VinceG Sorry, I'm having trouble replicating this issue now. The example I pasted is working fine for me when I try to re-implement it.

[TheAustinG]

@VinceG I ran into this same issue. I removed the return as you suggested and it seems to work as expected now.

[soloviofff]

It can be solved by

<div
        v-click-away="closeSomething"
        @click.stop
    >
    <div v-if="someThing"></div>
</div>

Or use v-show