如何在按钮内呈现绑定图标？答案

【问题标题】：How to render bound icons inside buttons?如何在按钮内呈现绑定图标？
【发布时间】：2019-03-14 16:07:49
【问题描述】：

说，我有一组按钮，我认为它们是一个整体组件：

<template>
    <div>
        <button v-for="button in buttonsGroup">{{button.icon}}</button>
    </div>
</template>

道具是“buttonsGroup”对象：

export default {
    name: 'buttonsGroup',
    props: ['buttonsGroup']
}

当我使用该组件时，我有一个带有图标的按钮列表：

data(){
  return {
    iconButtons: [
                    {
                        icon: '<i class="fas fa-smile"></i>',
                    },
                    {
                        icon: '<i class="fas fa-sad-tear"></i>',
                    }
    ]
  }
}

然后在layot中使用：

<buttons-group v-bind:buttonsGroup="iconButtons"></buttons-group>

因此，我看到了按钮列表，但按钮内没有图标，而是将它们视为文本。

我做错了什么？

【问题讨论】：

标签： vue.js vuejs2 vue-component font-awesome

【解决方案1】：

您可以使用 html 指令插入 html 内容

<button v-for="button in buttonsGroup" v-html="button.icon" />

但更好的方法可能是只为组件提供图标名称

<button v-for="button in buttonsGroup">
    <i :class="'fas ' + button.icon">
</button>

和

iconButtons: [
    {icon: "fa-smile"},
    {icon: "fa-sad-tear"}
]

【讨论】：

这是正确的。请注意，在使用 v-html 时，如果有办法让用户输入将由 v-html 标记呈现的文本，您可能会将自己暴露给 Cross-site scripting 攻击。
@DanielOrmeño 是的，我不会从用户那里获取这些数据，这是我自己的内部列表。谢谢！
我在原始答案中添加了替代建议
@StephenThomas 感谢您的想法。目前，我想设置整个图标，但也许也会使用这种方法。

【解决方案2】：

阅读有关原始 HTML 的文档部分：https://vuejs.org/v2/guide/syntax.html#Raw-HTML

默认情况下，双括号会呈现为文本，但您可以添加 v-html 标志以使其呈现。

【讨论】：

【解决方案3】：

还要考虑“按钮组”组件没有任何状态可观察，因此它是 functional component 的完美案例。

所以你可以这样实现：

<template functional>
  <div>
    <button v-for="(button, index) of props.buttonsGroup"
          :key="index"
          v-html="button.icon" 
          v-on="listeners" <!-- In case you want to listen to button events -->
    />
  </div>
</template>

在脚本中：

export default {
  props: {
    buttonsGroup: Array
  }
}

【讨论】：