CODEWITHSUNDEEP
javascripthtmlvue.jsvue-componentbootstrap-vue
Jerome
Jerome

Reputation: 866

Vue.js - Bootstrap Vue Popover interpreting HTML

I would like a popover to display one or multiple hyperlinks when clicked on. I am able to get other Bootstrap elements to interpret HTML by using the v-html argument although it is not working in this case.

Here's my code:

<template>
  <div>
    <b-button
      :id="popover"
      size="sm"
    >
      Button
    </b-button>
    <b-popover
      :target="popover"
      triggers="focus"
      v-html="actions"
    >
      {{ actions }}
    </b-popover>
  </div>
</template>

<script>
  export default {
    computed: {
      actions() {
        return [
          `<a href="www.google.com">Google</a><br>`,
          `<a href="www.youtube.com">Youtube</a><br>`
        ].join('')
      }
    }
  }
</script>

Upvotes: 2

Views: 832

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Remove the binding sign : on target and id then change them to popover1 then create a nested div with v-html directive which has as value actions :

<template>
  <div>
    <b-button
      id="popover1"
      size="sm"
    >
      Button
    </b-button>
    <b-popover
      target="popover1"
      triggers="focus"
    
    >
    <div v-html="actions"></div>
    </b-popover>
  </div>
</template>

<script>
  export default {
    computed: {
      actions() {
        return [
          `<a href="www.google.com">Google</a><br>`,
          `<a href="www.youtube.com">Youtube</a><br>`
        ].join('')
      }
    }
  }
</script>

If the id and target attributes are bound to a property you should keep the binding sign.

Upvotes: 3

Related Questions