Vue.js - Bootstrap Vue Popover interpreting HTML

Question

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>

Boussadjra Brahim · Accepted Answer · 2020-09-22 10:42:45Z

3

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.

edited Sep 22, 2020 at 10:42

answered Sep 21, 2020 at 6:58

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paul F. Wood Over a year ago

For the avoidance of doubt to later readers, you don't have to remove the dynamic binding on target and id to make this work. Its just it isn't appropriate in the OP. Putting the actions inside a div is the critical part.

Boussadjra Brahim Over a year ago

thanks for your comment but i don't understand what do you mean

Paul F. Wood Over a year ago

Its a very good answer that you gave. I just mean that you said to remove the bindings. Some people might think that you must remove those bindings to make v-html work.

Boussadjra Brahim Over a year ago

Yeah you're right , some people could define the id and target values as data or computed property

Collectives™ on Stack Overflow

Vue.js - Bootstrap Vue Popover interpreting HTML

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related