如何在按钮内渲染绑定图标

Question

说，我有一组按钮，这些按钮是整个组件：

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

道具是"按钮集"对象：

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>

结果，我看到了按钮列表，但是我将其视为文本而不是图标。

我做错了什么？

Answer 1

您可以使用HTML指令插入HTML Content

<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"}
]

Answer 2

读取RAW html上的文档部分：https：//v2.vuejs.s.org/v2/guide/syntax.html#raw-html

默认情况下，双括号将呈现为文本，但是您可以将V-HTML标志添加到渲染中。

Answer 3

还考虑了"按钮"组。组件没有任何状态可以观看，因此它是功能组件的完美案例。

因此您可以这样实现：

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