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，然后使用v-html指令创建一个嵌套div，其值为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 属性绑定到某个属性，则应保留绑定符号。