Vuejs2 Vue引导-工具提示不适用于动态呈现的HTML

我有一个列表组，其列表项通过API调用呈现。 比如说,

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

{
“MenuID”：“1”，
“名称”：“帮助”，
“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>

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

基于此，您必须添加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>

以前的帖子，但我在你的代码中没有看到v形工具提示

  <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>

使用动态块时，需要动态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>

{{itemName}}

从列表中删除项目！

name属性只是html文本，并使用v-html指令呈现，这样，vue将不会编译内容。您可以使用模板帮助注册组件，并使用道具接收工具提示文本和标题文本。这是否回答了您的问题？工具提示位于API调用的html中。问题是这个vue不解释注入html中的指令。好的，我把它看作是v-b-tooltip。这很可能是因为代码的编写方式。“帮助”。看起来您正在尝试传递键名上的字符串。在进行自助训练之前，你正在摆脱束缚。你能试试“帮助”吗。另外，我昨天通过做v-tooltip.hove:title=而不是v-b-tooltop来工作。希望这有帮助-问题还是一样。“”是API获取的内容，而不是代码中的内容。-“v-b-工具提示”是引导工具提示。-@jacky的评论是最好的方法。API不应提供html，而应提供“工具提示文本”和“内容文本”。然后在组件中使用这些属性。