Javascript Vuejs：如何为每个下拉项实现popover

我希望在用户悬停下拉项时向用户显示信息文本。每个下拉列表都有一个唯一的下拉列表。我使用的是bootstrap vue，我有一个下拉项循环

<b-dropdown :text="currentColorType">
    <b-dropdown-item v-for="colorType in colorTypes"
    :key="colorType.id"
    :value="colorType.name">{{colorType.name}}</b-dropdown-item>
</b-dropdown>
<b-popover target="id" placement="bottom" triggers="hover blur">
    <div>Information Text Here</div>
</b-popover>

---

但是没有起作用。即使我能够附加id，也不确定它是否会被触发。是否有更好的方法显示下拉项目悬停的信息？

您可能需要将元素的某些属性绑定到

对于

也使用

v-for

例如：

{{colorType.name}
信息文本在这里

最简单的方法是使用popover指令

v-b-popover

而不是

。 这将允许您直接将popover连接到

newvue({
el:“#应用程序”，
数据（）{
返回{
颜色类型：[{
id:1，
名称：“蓝色”
},
{
id:2，
姓名：“红色”
},
{
id:3，
名称：“绿色”
}
]
}
}
})

{{colorType.name}

是否可以在v-b-popover中提供html，其在文档中提供-。但是给html:true似乎不起作用。我希望有html而不是蓝色there@theFrontEndDev我添加了另一个代码片段，它显示了呈现HTML的两种方式。

id="colorType.name"
id="`${colorType.name}`"

<b-dropdown :text="currentColorType">
  <b-dropdown-item 
   v-for="colorType in colorTypes"
   :key="colorType.id"
   :id="colorType.id"
   :value="colorType.name"
  >
    {{colorType.name}}
  </b-dropdown-item>
</b-dropdown>

<b-popover 
 v-for="(eachType, i) in colorTypes" 
 :key="i" 
 :target="eachType.id" 
 placement="bottom" 
 triggers="hover blur"
>
  <div>Information Text Here</div>
</b-popover>