[Vue 警告]：缺少必需的道具：“icon”位于 <FontAwesomeIcon> 位于 <RouterLink key="products" to= {name: 'products'} class="box flex flex-col

Question

我正在使用Vue 3和vite。

对于图标，我使用很棒的字体。

这是我的代码：

</template>
  <div class="pages flex flex-col bg-maincolor rounded-lg py-3">
      <router-link
        v-for="page in pagesList"
        :key="page.title"
        :to="{ name: page.to }"
        class="box flex flex-col items-center justify-center h-[70px]"
      >
        <font-awesome-icon
          :icon="[page.itype, page.iname]"
          class="text-headcolor text-xl mb-2"
        />
        <font-awesome-icon />
        <span class="text-headcolor text-sm uppercase">{{ page.title }}</span>
      </router-link>
   </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "AppNavbar",
  setup: () => {
    const pagesList = ref([
      { title: "about", to: "about", itype: "far", iname: "user" },
      { title: "resume", to: "resume", itype: "far", iname: "rectangle-list" },
      { title: "works", to: "works", itype: "fas", iname: "eye" },
      { title: "blog", to: "blog", itype: "fas", iname: "newspaper" },
      { title: "contact", to: "contact", itype: "far", iname: "paper-plane" },
      { title: "products", to: "products", itype: "fas", iname: "laptop-code" },
    ]);
    return {
      pagesList,
    };
  },
};
</script>

<style lang="scss" scoped></style>

一切正常，直到我完成循环

我的问题是如何解决问题出在哪里？我需要它更有活力，但我不工作！

Answer 1

抛出此错误是因为创建了第二个

FontAwesomeIcon

组件，而没有传递

icon

属性：

<font-awesome-icon
      :icon="[page.itype, page.iname]"
      class="text-headcolor text-xl mb-2"
    />
<font-awesome-icon /> <---- right here

看起来您之前已将其作为结束标记，或者您的 IDE 在您重写代码时自动创建了它。但是，如果它打算有两个 FontAwesomeIcons，那么显然您也会传递

icon

属性的数据。