Vue 3 - 动态绑定字体真棒图标

Question

我有一个v-for 循环，其他一切似乎都在工作，但由于某种原因，该图标没有出现。

如何正确绑定？

注意：我还返回了图标并将其导入，并且已经在我的项目中使用了 font awesome，所以我知道它正在工作。问题是我如何绑定它。

---

进口：

import { ref } from '@vue/composition-api'
import {faCircle} from '@fortawesome/free-solid-svg-icons'

v-for循环：

<div
    class="m-auto w-full flex flex-col justify-center items-center"
>
    <div>
        <fa :icon="item.icon" class="text-5xl text-gray-400" />
        // the icon isn't showing but when I write {{item.icon}} I can see the text 'faCircle'
    </div>
    <div class="py-4 text-2xl font-semibold block">
        {{ item.title }}
    </div>
    <div class="px-10">
        <span class="text-base">
            {{ item.text }}
        </span>
    </div>
</div>

脚本：

export default {
  setup() {
    const items = ref([
      {
        title: 'bla',
        text: 'bla',
        icon: 'faCircle'
      },
      {
        title: 'bla',
        text: 'bla',
        icon: 'faCircle'
      },
      {
        title: 'bla',
        text: 'bla',
        icon: 'faCircle'
      }
    ])

我退回了物品：

return {
  faCircle,
  items
}

Answer 1

所以我知道问题出在哪里。我把它写成一个字符串

脚本

   export default {
      setup() {
        const items = ref([
          {
            title: 'bla',
            text: 'bla',
            icon: 'faCircle'
          },
          {
            title: 'bla',
            text: 'bla',
            icon: 'faCircle'
          },
          {
            title: 'bla',
            text: 'bla',
            icon: 'faCircle'
          }
        ])

ICON 应该写成 WITHOUT 字符串，因为我们将它导入到表达式中

 {
    title: 'bla',
    text: 'bla',
    icon: faCircle
  }