如何在vue js中动态设置b-popover traget?

时间:2017-12-24 12:16:26

标签: javascript vue.js bootstrap-popover bootstrap-vue

我想显示每个州的详细信息,用户使用一个弹出窗口组件点击的位置。所有数据都将使用状态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>

感谢您宝贵的时间。

1 个答案:

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