Vue中动态渲染FontAwesome图标失败，如何排查代码逻辑问题？

存在的问题 #

• 图标属性绑定错误：font-awesome-icon组件的:icon属性中，你写的['fab', 'temp']里的temp是固定字符串，不是动态取值，额外绑定的:temp属于无效自定义属性，FontAwesome组件不会识别该属性取值。
• 工具方法逻辑错误：getIcon方法没有接收当前遍历的索引参数，内部仅定义了临时变量没有返回值，且重复做数组遍历属于冗余逻辑。
• 数据对应关系缺失：当前代码中params数组为空，没有实际渲染数据，且要保证业务运行时params和icons数组长度一致，才能按索引正确匹配。

修复方案 #

你不需要额外编写映射方法，直接在模板遍历的时候用当前索引取icons数组的对应值即可，修复后的代码如下：

<template>
  <div class="items">
    <div class="item" v-for="(param, index) in params" :key="index">
      <font-awesome-icon :icon="['fab', icons[index]]" class="fab fa" />
      <h3 class="skills-title">{{ param.name }}.</h3>
      <p style="display: none">{{ param.description }}.</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "PxSkillCard",
  data() {
    return {
      // 示例数据，实际按你的业务逻辑填充，保证和icons数组长度一致
      params: [
        {name: 'Laravel', description: 'PHP服务端框架'},
        {name: 'WordPress', description: '开源内容管理系统'}
      ],
      icons: ["laravel", "wordpress-simple"],
    };
  }
};
</script>

如果要避免索引匹配出错，更稳妥的写法是直接把图标名写到params数组的每个对象中，无需单独维护icons数组，避免两个数组顺序不一致导致的匹配错误。

内容的提问来源于stack exchange，提问作者Edgar Gc