Vue3中通过JavaScript数组动态渲染FontAwesome图标失败

你遇到的问题是因为Vue的文本插值{{}}会把内容当作纯文本输出，不会解析其中的Vue组件标签。要正确渲染图标，你需要直接使用<font-awesome-icon>组件并动态绑定图标属性，而非存储组件的HTML字符串。

修改步骤： #

1. 调整数据结构：将servicesArr中icon字段的值改为FontAwesome支持的数组格式（对应图标的前缀和名称），而非HTML字符串。
2. 模板中直接使用组件：在循环里调用<font-awesome-icon>，通过:icon绑定数据中的图标标识。

修改后的完整代码： #

脚本部分：

<script>
export default {
  data() {
    return {
      servicesArr: [
        {
          icon: ['fa-solid', 'fa-shop'],
          title: "E-commerce",
          description: "这里填写你的服务描述"
        }
      ]
    }
  }
}
</script>

模板部分：

<div class="aboutme-card" v-for="(item,index) in servicesArr" :key="index">
  <div class="service-card-icon">
    <font-awesome-icon :icon="item.icon" />
  </div>
  <div class="service-card-title">{{item.title}}</div>
  <p class="service-card-desc">{{item.description}}</p>
</div>

为什么原方法无效？ #

{{item.icon}}是文本插值，Vue会直接输出字符串内容，不会编译其中的<font-awesome-icon>组件。而通过:icon动态绑定属性，Vue会正确识别并渲染FontAwesome组件，生成对应的SVG图标。

注意：不要尝试用v-html解决这个问题，v-html仅能渲染普通HTML元素，无法解析Vue组件。

内容的提问来源于stack exchange，提问作者Giorgi Shalamberidze