我想显示每个州的详细信息,用户使用一个弹出窗口组件点击的位置。所有数据都将使用状态ID动态设置。
现在我的问题是,我无法动态设置目标。我想设置用户点击的popover目标。
我已尝试过以下代码
<template>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="texas" variant="primary" @click="onOpen">Details</b-btn>
<b-btn id="california" variant="primary" @click="onOpen">Details</b-btn>
<b-btn id="florida" variant="primary" @click="onOpen">Details</b-btn>
<b-btn id="ohio" variant="primary" @click="onOpen">Details</b-btn>
</div>
<b-popover ref="popover" target="{{id}}" title="Popover">
Hello <strong>{{id}}</strong>
</b-popover>
</div>
</template>
<script>
export default {
data(){
return {
id: ''
}
},
methods: {
onOpen(e) {
this.id = e.target.id;
this.$root.$emit('bv::show::popover',e.target.id);
},
}
}
</script>
感谢您宝贵的时间。
答案 0 :(得分:0)
如果这些按钮ID来自列表,则可以在v-for
上使用b-popover
例如:
<template>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn v-for="(eachButton, i) in ids" :key="i" :id="eachButton" variant="primary" @click="onOpen">Details</b-btn>
</div>
<b-popover ref="popover" v-for="(eachId, i) in ids" :key="i" :target="eachButton" title="Popover">
Hello <strong>{{ eachId }}</strong>
</b-popover>
</div>
</template>
<script>
export default {
data(){
return {
ids: [
'texas',
'california',
'florida',
'ohio',
]
id: ''
}
},
methods: {
onOpen(e) {
this.id = e.target.id;
this.$root.$emit('bv::show::popover',e.target.id);
},
}
}
</script>