在 Vue.js 中循环打印 Font Awesome 图标

Question

我想在 v-for 循环 上打印 icons。在 JSON 我有需要使用的链接和图标的数据。当我想为 Vue.js 使用 Font Awesome 时，我无法打印 Font Awesome 图标 当我使用 CDN 时，这不是问题，但这是通过 NPM 构建的。 这是需要发生的事情。 请检查图片 enter image description here

<template>
  <div class="home container">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-7">
        <div class="row">
          <div class="col-12">
            <h1 class="pt-3 pb-2">{{ personalInformation[0].name }}</h1>
            <p class="lead">{{ personalInformation[0].address }}</p>
            <p class="lead">{{ personalInformation[0].phone }}</p>
          </div><!-- col-12 -->
        </div><!-- row -->
        <div class="row">
          <div class="col-12 col-sm-12 col-md-6">
            <p v-for="(socialNetwork,index) in personalInformation[0].socialNetworks" :key="index">
              <a :href="socialNetwork.address">
                <font-awesome-icon :icon="socialNetwork.icon" />
                <!-- <i :class="socialNetwork.icon"></i> -->
                {{socialNetwork.name}}
                {{socialNetwork.icon}}
                </a>
            </p>
          </div><!-- col-12 col-sm-12 col-md-6 -->
          <div class="col-12 col-sm-12 col-md-6">

          </div><!-- col-12 col-sm-12 col-md-6 -->
        </div><!-- row -->
      </div><!-- col-12 col-sm-12 col-7 -->
      <div class="col-12 col-sm-12 col-md-5">
        <img src="../assets/img/myImg.jpg" class="rounded-circle w-50 float-right pt-3" alt="My image">
        <div class="clearfix"></div>
      </div><!-- col-12 col-sm-12 col-sm-5 -->
    </div><!-- row --> 
  </div>
</template>

<script>
import axios from 'axios'
import personalData from '../json/myInfo.json'

export default {
  name: 'Home',
  data () {
    return {
      personalInformation : personalData
    }
  },
  created(){
    console.log("Created")
    console.log(this.personalInformation)
    this.personalInformation.forEach(element => {
      console.log(element.phone)
      console.log(element.socialNetworks[0].name)
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 1

您的icon 属性是一个数组，您需要将它加入一个字符串

<a :href="socialNetwork.address">
   <i :class="socialNetwork.icon.join(' ')"></i>
   {{socialNetwork.name}}
</a>

编辑。也可以直接提供数组：

<a :href="socialNetwork.address">
   <i :class="socialNetwork.icon"></i>
   {{socialNetwork.name}}
</a>