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

Question

我有一个 v-for 循环，其他一切似乎都正常，但由于某种原因图标没有显示。

如何正确绑定？

注意：我还 return 图标并导入它，并且我已经在我的项目中使用了很棒的字体，所以我知道它可以正常工作。问题是我如何绑定它。

进口：

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编辑了项目：

return {
  faCircle,
  items
}

Answer 1

所以我知道问题出在哪里了。我把它写成一个 String

脚本

   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 应该写成没有字符串，因为我们在表达式中导入它

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

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

Vue 3 - dynamically bind font awesome icons

font-awesome

vue.js