Bootstrap-Vue，在条件下显示工具提示答案

【问题标题】：Bootstrap-Vue, show tooltip on conditionBootstrap-Vue，在条件下显示工具提示
【发布时间】：2022-01-22 03:47:38
【问题描述】：

使用 Bootstrap-Vue (vue2)。单击 div 时，仅当 isDisabled=true 时才需要显示工具提示

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

这是点击 div 时触发的方法

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

我无法使 v-if 条件起作用，如果我将其删除，则单击元素时工具提示可以正常工作

部分

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

之所以有效，是因为我在 this.isDisabled 上有一些日志，并且它更改为 true

【问题讨论】：

您的代码是正确的。不显示工具提示的唯一原因是条件this.temporaryFilters['countries'] != undefined。
那部分是正确的，因为 "this.isDisabled = true" 有效，但工具提示没有显示

标签： vue.js bootstrap-vue

【解决方案1】：

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

您可以像这样更新条件并尝试。

【讨论】：

【解决方案2】：

如果条件有效并且this.isDisabled 是true，您可以在第二次单击后看到工具提示。 v-if 工作正常。

如果您想在第一次点击后看到工具提示，您必须添加事件修饰符.capture。示例：@click.capture="excludeCountry" Docs, Demo

【讨论】：