Vuejs:如何实现每个下拉项的popover

Question

我希望在用户悬停下拉项时向用户显示信息文本。每个下拉列表都有一个唯一的。我正在使用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，以便在中作为目标。尝试

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

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

Answer 1

最简单的方法是使用popover指令v-b-popover而不是<b-popover>。这将允许您将popover直接连接到<b-dropdown-item>。

new Vue({
el: '#app',
data() {
return {
colorTypes: [{
id: 1,
name: 'Blue'
},
{
id: 2,
name: 'Red'
},
{
id: 3,
name: 'Green'
}
]
}
}
})

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-dropdown text="Colors">
<b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover="colorType.name">
{{ colorType.name }}
</b-dropdown-item>
</b-dropdown>
</div>

popover中包含HTML的示例

new Vue({
el: '#app',
data() {
return {
colorTypes: [{
id: 1,
color: 'Blue',
name: '<b class="text-primary">Blue<b>'
},
{
id: 2,
color: 'Red',
name: '<b class="text-danger">Red<b>'
},
{
id: 3,
color: 'Green',
name: '<b class="text-success">Green<b>'
}
]
}
}
})

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<h5>Using the HTML modifier</h5>
<b-dropdown text="Colors">
<b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover.html="colorType.name">
{{ colorType.color }}
</b-dropdown-item>
</b-dropdown>
<hr />
<h5>Using an object</h5>
<b-dropdown text="Colors">
<b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover="{ content: colorType.name, html: true }">
{{ colorType.color }}
</b-dropdown-item>
</b-dropdown>
</div>

Answer 2

您可能需要将元素的某个道具绑定到

<b-dropdown>的id

并且对于CCD_ 7也使用CCD_。

例如：

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