Vue Bootstrap - 工具提示不适用于动态呈现的 HTML答案

【问题标题】：Vue Bootstrap - Tooltip not working for dynamically rendered HTMLVue Bootstrap - 工具提示不适用于动态呈现的 HTML
【发布时间】：2018-10-28 14:54:21
【问题描述】：

我有一个列表组，其列表项是通过 API 调用呈现的。例如，

  {
    "MenuID": "1",
    "Name": "<span v-b-tooltip.hover title=\"Self Help Training\">Help</span>",
    "Url": "example.com"
  }

我有以下 HTML，

  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
      <a :href="link.Url" v-html="link.Name"></a>
    </li>
  </ul>

将鼠标悬停在项目上时工具提示不起作用。你能帮我理解为什么会这样以及如何解决吗？谢谢

【问题讨论】：

name属性只是html文本，用v-html指令渲染，这样vue就不会编译内容了
可以使用模板Help注册一个组件，并使用props接收tooltip文本和标题文本
这能回答你的问题吗？ How can add bootstrap tooltip inside Vue.js

标签： vuejs2 bootstrap-4 vue-component bootstrap-vue

【解决方案1】：

使用动态块时，您需要动态 id。这意味着您必须为每个链接使用不同的 id，并确保在为工具提示创建目标时使用相同的 id。就个人而言，如果项目还没有动态 ID，我会创建一个动态 ID。

<div>
  <p>{{itemName}}</p>
  <div>
    <img :id="'prod_' + prodId" src="../assets/utility/product.svg">
  </div>
  <b-tooltip :target="'prod_' + prodId" triggers="hover">
    Delete item from the list!
  </b-tooltip>
</div>

【讨论】：

【解决方案2】：

旧帖子，但我在您的代码中没有看到 v-tooltip。

  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
      <a :href="link.Url" v-html="link.Name"></a>
    </li>
  </ul>

做这样的事情

  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
      <a :href="link.Url" v-tooltip="'Your Tooltip message'" v-html="link.Name"></a>
    </li>
  </ul>

【讨论】：

工具提示在 API 调用的 html 中。问题是这个 vue 不解释注入的 html 中的指令。
好的，我认为它是 v-b-tooltip。它很可能必须与您的代码编写方式有关。 "帮助"。看起来您正试图在键名上传递一个字符串。您在自助培训之前转义字符串。你可以试试“Help”。另外，我昨天通过 v-tooltip.hove :title= 而不是 v-b-tooltop 开始工作。希望这会有所帮助。
- 问题保持不变。 “”是 API 获取的内容，而不是代码中的内容。 - “v-b-tooltip”是一个引导工具提示。 - @jacky 的评论是最好的方法。 API 不应提供 html，而应仅提供“工具提示文本”和“内容文本”。然后在组件中使用这些属性。

【解决方案3】：

基于https://bootstrap-vue.js.org/docs/components/tooltip/，您必须添加 v-b-tooltip 指令。

<ul class="list-group list-group-flush">
  <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
     <a :href="link.Url" v-html="link.Name" v-b-tooltip.hover :title="link.Name"></a>
  </li>
</ul>

【讨论】：