How can I set b-popover target dynamically in vue js?

Question

I want to show details of each state, Where user has clicked using one popover component. There all data will be set dynamically using state id.

Now my problem is, I can't set target dynamically. I want to set the popover target, where user has clicked.

I have tried this code below

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

Are you using bootstrap-vue? According to their documentation, you can add popover directly onto the element itself.https://bootstrap-vue.js.org/docs/components/popover/ — azs06, Dec 24 '17 at 20:06
Yes, I got it, But need to show enough information from API, So I want to use function to popover — Jakarea Parvez, Dec 27 '17 at 09:21
I see, based on their documentation it looks like you have to have separate popover component for different targets, can't dynamically update it. Sorry couldn't help you. — azs06, Dec 27 '17 at 16:03

score 0 · Answer 1 · answered Aug 14 '20 at 02:33

If these button ids from list you could use v-for on your b-popover

eg:

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

How can I set b-popover target dynamically in vue js?

1 Answers1