Печать значка Font Awesome над l oop дюйм Vue. js - PullRequest
Новая
       151

Печать значка Font Awesome над l oop дюйм Vue. js

0 голосов
/ 04 августа 2020

Я хочу напечатать значки поверх v-for l oop. В JSON у меня есть данные для ссылки и значка, которые необходимо использовать. У меня проблема с печатью значка Font Awesome , когда я хочу использовать Font Awesome для Vue. js Когда я использую CDN, это не проблема, но эта сборка не работает NPM это так. Вот что надо было сделать. ПРОВЕРЬТЕ ИЗОБРАЖЕНИЕ введите здесь описание изображения 

<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>

1 Ответ

0 голосов
/ 04 августа 2020

Ваше свойство icon представляет собой массив, вам нужно присоединить его к строке 

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

EDIT. Вы также можете напрямую предоставить массив: 

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