Bootstrap-Vue, show tooltip on condition-CodePudding

Using Bootstrap-Vue (vue2). When clicking on a div, I need to show a tooltip only if isDisabled=true

<div id="disabled-wrapper"  : 
@click="excludeCountry" tabindex="0">
<b-tooltip v-if="isDisabled" variant="secondary" target="disabled-wrapper" triggers="click">
</b-tooltip>

this is the method that fires on clicking the div

excludeCountry(){
      if (this.temporaryFilters['countries'] != undefined){
        this.isDisabled = true;
      }
      else {
        this.operator = 'notin';
        this.exclude = !this.exclude;
      }
    }

I cannot get the v-if condition to work, If I remove it, the tooltip works fine clicking on the element

the part

 if (this.temporaryFilters['countries'] != undefined){
        this.isDisabled = true;
      }

works because I have some logs on this.isDisabled and it changes to true

CodePudding user response：

this.temporaryFilters['countries'] !== undefined

You can update the condition like this and try.

CodePudding user response：

If condition works and this.isDisabled is true, you can see tooltip after second click. v-if works correct.

If you want to see tooltip after first click you must add Event Modifier .capture. Example: @click.capture="excludeCountry" Docs, Demo