vue.js - 在 Vue 中动态导入 fontawesome 图标

Question

我在动态渲染图标时遇到问题。我使用 v-for 从对象数组中获取所有数据。另外，我还有第二个数组，用于保存我使用的图标的名称。但是，当第一个数组循环时，第二个数组(图标)不会移动。

我尝试创建一种方法来映射第一个和第二个数组中的数据以创建一个新数组。但什么也没发生。

我的代码:

Component.vue

<template>
  <div class="items">
    <div class="item" v-for="(param, index) in params" :key="index">
      <font-awesome-icon :icon="['fab', 'temp']" :temp="getIcon" :key="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 {
      params: [],
      icons: ["laravel", "wordpress-simple"],
    };
  },

  methods: {
    getIcon() {
      let temp = this.params.map((aux, index) => {
        return [aux, this.icons[index]];
      });
    },
  },
};
</script>

我将 fontawesome 文件分离到一个单独的模块中 fontawesome.js

import Vue from "vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faLaravel,
  faWordpressSimple
} from "@fortawesome/free-brands-svg-icons";

import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(
  faLaravel,
  faWordpressSimple
);

Vue.component("font-awesome-icon", FontAwesomeIcon);

最终结果是:

我的代码(或我的逻辑)怎么样？

Answer 1

您已经循环了模板中的所有内容，无需在函数中再次循环。

像这样的东西应该有效。

<template>
  <div class="items">
    <div class="item" v-for="(param, index) in params" :key="index">
      <font-awesome-icon :icon="['fab', icons[index]]" :key="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 {
      params: [],
      icons: ["laravel", "wordpress-simple"],
    };
  },
};
</script>

假设两个数组大小相同，并且参数和图标中的数据顺序正确。