I'm using Bootstrap Vue with Vue.js and am experiencing a problem where I'm iterating over some items and displaying them to the user.

The issue is, when a user clicks on one of the popovers, every popover that was opened gets closed (as I desire), but when the user clicks outside the focus area of the targeted (opened) popover, it doesn't close anymore.

It looks like the opening animation runs every time the user clicks on the targeted popover.

Here is the code:

<template>
  <div>
    <div class="row" v-for="(n, i) in 5" :key="n">
      <div :id="'popover' + visitor.id + '-' + i" @click="$root.$emit('bv::hide::popover')">
        <div class="card">
          <b-popover :target="'popover' + visitor.id + '-' + i">
            <template slot="title">
              Edit image
              <button
                class="close-popover"
                @click="$root.$emit('bv::hide::popover', 'popover' + visitor.id + '-' + i)"
              >X</button>
            </template>
          </b-popover>
        </div>
      </div>
    </div>
  </div>
</template>

I'm using Bootstrap Vue with Vue.js and am experiencing a problem where I'm iterating over some items and displaying them to the user.

The issue is, when a user clicks on one of the popovers, every popover that was opened gets closed (as I desire), but when the user clicks outside the focus area of the targeted (opened) popover, it doesn't close anymore.

It looks like the opening animation runs every time the user clicks on the targeted popover.

Here is the code:

<template>
  <div>
    <div class="row" v-for="(n, i) in 5" :key="n">
      <div :id="'popover' + visitor.id + '-' + i" @click="$root.$emit('bv::hide::popover')">
        <div class="card">
          <b-popover :target="'popover' + visitor.id + '-' + i">
            <template slot="title">
              Edit image
              <button
                class="close-popover"
                @click="$root.$emit('bv::hide::popover', 'popover' + visitor.id + '-' + i)"
              >X</button>
            </template>
          </b-popover>
        </div>
      </div>
    </div>
  </div>
</template>

Any help is appreciated!

• javascript
• twitter-bootstrap
• vue.js
• bootstrap-vue

5 Answers 5

You can set triggers="click blur" on the popover. This will close it when the user clicks outside of the popover or on the target.

You can check more HERE.

You can use this function in created

created(){
    document.getElementsByTagName('body')[0].addEventListener('click', e => {
      this.$root.$emit('bv::hide::popover')
    });
},

Add this Jquery to your code and it will work, probably.

 $('body').on('click', function (e) {
        $('[target=popover]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });

Also you can try this:

You can add this to your code and try.

 <a class="close" href="#">Close</a>  

Also add this jquery:

 $('.close').click(function() {
       $(".class").fadeOut(300);
    });

A possible solution is the vue directive v-click-outside.

Basically, you just install it: npm install --save v-click-outside

And use:

<template>
  <div v-click-outside="onClickOutside"></div>
</template>

add the attribute tabindex='0' to the click element

<span id="popover" tabindex='0'>test</span>

add set the triggers to 'click blur'

<b-popover
   target="popover"
   title="Prop Examples"
   triggers="click blur"
   content="Embedding content using properties is easy"
/>