如何在 vue js 中动态设置 b-popover 目标？

Posted 2023-02-22

【中文标题】如何在 vue js 中动态设置 b-popover 目标？

【英文标题】：How can I set b-popover target dynamically in vue js?

【发布时间】：2018-06-06 05:30:09

【问题描述】：

我想显示每个状态的详细信息，即用户使用一个弹出框组件单击的位置。所有数据都将使用状态 ID 动态设置。

现在我的问题是，我无法动态设置目标。我想设置用户点击的弹出框目标。

我已经在下面尝试过这段代码

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

【问题讨论】：

你在使用 bootstrap-vue 吗？根据他们的文档，您可以将弹出框直接添加到元素本身。bootstrap-vue.js.org/docs/components/popover

是的，我知道了，但是需要从 API 显示足够的信息，所以我想使用函数来弹出

我明白了，根据他们的文档，您似乎必须为不同的目标设置单独的弹出框组件，不能动态更新它。抱歉帮不了你。

【参考方案1】：

如果这些按钮 ID 来自列表，您可以在 b-popover 上使用 v-for

例如：

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