在 Vue 中的 v-for 循环中不显示超棒的字体图标，但呈现为 HTML 文本

Question

我必须使用 v-for 将一个元素循环四次，一切都呈现得很好，但是 fontawesome 图标没有显示为图标，而是显示为 HTML 文本。这是代码：

HTML:

<div class="second-section-paragraph-1" v-for="(el) in ideasDrawings">
    <div>
        {{el.icon}}
    </div>
    <h3>{{el.title}}</h3>
    <p>{{el.paragraph}}</p>
</div>

视觉：

ideasDrawings: [
    {
        icon: '<i class="fas fa-lightbulb"></i>',
        title:'First there is an idea',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: '<i class="far fa-comment"></i>',
        title:'Then we talk about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: '<i class="fas fa-cloud"></i>',
        title:'And we think about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },
    
    {
        icon: '<i class="fas fa-pencil-alt"></i>',
        title:'So we draw along',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

Answer 1

我会避免 v-html，而是将您的 <template> 更改为

<div class="second-section-paragraph-1" v-for="(el) in ideasDrawings" :key="el.title">
    <i :class="['fas', el.icon]"></i>
    <h3>{{el.title}}</h3>
    <p>{{el.paragraph}}</p>
</div>

并将 <script> 中的部分更改为

ideasDrawings: [
    {
        icon: 'fa-lightbulb',
        title:'First there is an idea',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: 'fa-comment',
        title:'Then we talk about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: 'fa-cloud',
        title:'And we think about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },
    
    {
        icon: 'fa-pencil-alt',
        title:'So we draw along',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

Answer 2


<div
 class="second-section-paragraph-1"
 v-for="(el) in ideasDrawings"
 :key="el.title"
>
    <i :class="el.icon"></i>
    <h3>{{el.title}}</h3>
    <p>{{el.paragraph}}</p>
</div>

ideasDrawings: [
    {
        icon: 'fas fa-lightbulb',
        title:'First there is an idea',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: 'far fa-comment',
        title:'Then we talk about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },

    {
        icon: 'fas fa-cloud',
        title:'And we think about',
        paragraph:'Lorem ipsum dolor sit, conetu adipisc sed be et ore aliqua pleasure itself'
    },
   ]

icon: 'far fa-comment', 图标：'fas fa-cloud'

在 Vue 中的 v-for 循环中不显示超棒的字体图标，但呈现为 HTML 文本

Font-awesome icons not displaying in v-for loop in Vue, but rendering as HTML text

font-awesome

vue.js