javascript - 如何在 Vue.js 中有条件地显示工具提示？

Question

我正在尝试有条件地显示 v-tooltip基于 bool 值。这是我目前拥有的:

<div v-for="predefinedContentItem in getPredefinedContentCategoryItems(category.id)"
  :class="['category-item-content-wrapper', { 'not-clickable': isMainDialogClosed}]"
  v-tooltip.right="getPredefinedContentItemMessage(predefinedContentItem)"
  slot="content"
  :key="predefinedContentItem.id"
  @click="onPredefinedContentItemClick(predefinedContentItem, category.id)">

我并不是要动态显示不同的工具提示文本。我想确定是否显示实际的工具提示。我尝试了以下三元组但没有成功:

<div v-for="predefinedContentItem in getPredefinedContentCategoryItems(category.id)"
  :class="['category-item-content-wrapper', { 'not-clickable': isMainDialogClosed}]"
  v-tooltip.right="isAutomotive ? getPredefinedContentItemMessage(predefinedContentItem) : null";
  slot="content"
  :key="predefinedContentItem.id"
  @click="onPredefinedContentItemClick(predefinedContentItem, category.id)">

Answer 1

您可以向 v-tooltip 传递一个带有额外选项的对象，并在指令中添加 show 属性，如下所示:

<div v-tooltip="{
  content: getPredefinedContentItemMessage(predefinedContentItem),
  show: isAutomotive,
  trigger: 'hover',
  placement: 'right',
}">