Vue.js - Bootstrap Vue Popover 解释 HTML

Question

我希望弹出窗口在单击时显示一个或多个超链接。我能够通过使用v-html参数让其他 Bootstrap 元素来解释 HTML，尽管它在这种情况下不起作用。

这是我的代码：

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

Answer 1

删除绑定登录:，target然后id更改它们以popover1创建一个嵌套的 div，其中包含v-html具有 as value 的指令actions：<template>&nbsp; <div>&nbsp; &nbsp; <b-button&nbsp; &nbsp; &nbsp; id="popover1"&nbsp; &nbsp; &nbsp; size="sm"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; Button&nbsp; &nbsp; </b-button>&nbsp; &nbsp; <b-popover&nbsp; &nbsp; &nbsp; target="popover1"&nbsp; &nbsp; &nbsp; triggers="focus"&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; >&nbsp; &nbsp; <div v-html="actions"></div>&nbsp; &nbsp; </b-popover>&nbsp; </div></template><script>&nbsp; export default {&nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; actions() {&nbsp; &nbsp; &nbsp; &nbsp; return [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<a href="www.google.com">Google</a><br>`,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<a href="www.youtube.com">Youtube</a><br>`&nbsp; &nbsp; &nbsp; &nbsp; ].join('')&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }</script>如果id和target属性绑定到属性，则应保留绑定符号。