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

Question

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

<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',
}">

Answer 2

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