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

Question

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

如何正确绑定？

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

---

进口：

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应该在没有字符串的情况下编写，因为我们将其导入表达式中

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