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

Posted 2023-03-07

【中文标题】Vue 3 - 动态绑定字体真棒图标

【英文标题】：Vue 3 - dynamically bind font awesome icons

【发布时间】：2020-12-29 20:26:42

【问题描述】：

我有一个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

【问题讨论】：

查看***.com/a/50522854/1292050

根本没有帮助

【参考方案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