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属性绑定到属性，则应保留绑定符号。