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

Posted 2023-02-22

【中文标题】Bootstrap-Vue，在条件下显示工具提示

【英文标题】：Bootstrap-Vue, show tooltip on condition

【发布时间】：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" 有效，但工具提示没有显示

【参考方案1】：

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

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

【参考方案2】：

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

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