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>

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

如果id和target属性绑定到属性，则应保留绑定符号。