Vue.js - Bootstrap Vue Popover 解释 HTML

Posted 2023-02-22

【中文标题】Vue.js - Bootstrap Vue Popover 解释 HTML

【英文标题】：Vue.js - Bootstrap Vue Popover interpreting HTML

【发布时间】：2021-01-07 05:35:41

【问题描述】：

我希望弹出框在单击时显示一个或多个超链接。我可以使用 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>

【参考方案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 属性绑定到某个属性，则应保留绑定符号。

【讨论】：

为避免以后的读者产生疑问，您不必删除target 和id 上的动态绑定即可完成这项工作。它只是在OP中不合适。将actions 放入div 是关键部分。

感谢您的评论，但我不明白您的意思

您给出的答案非常好。我只是说你说要删除绑定。有些人可能认为您必须删除这些绑定才能使v-html 工作。

是的，你是对的，有些人可以将 id 和 target 值定义为数据或计算属性