Использование вариантов с font-awesome в Vue. js - PullRequest
Новая
       21

Использование вариантов с font-awesome в Vue. js

0 голосов
/ 27 апреля 2020

Я новичок в Vue. js и пытаюсь использовать варианты для отображения информации о недвижимости (например, количество спален, ванных комнат, гостиной, парковки и т. Д. c). в неупорядоченном списке, и я хотел бы добавить к нему значок с использованием font-awesome, который отображается соответствующим образом.

Я использую Vue -CLI и мой основной файл. js выглядит так: 

import Vue from "vue";
import App from "./App";
import router from "./router";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faBed } from "@fortawesome/free-solid-svg-icons";
import { faBath } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faBed, faBath);

Vue.config.productionTip = false;

Vue.component("font-awesome-icon", FontAwesomeIcon);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

Пока я могу заставить это работать так. Домой. vue выглядит так: 

<ul class="container hero__list">
          <li
            class="hero__items"
            v-for="variant in variants"
            :key="variant.variantId"
          >
            <font-awesome-icon :icon="['fas', 'bed']" />
            {{ variant.variantTitle }}
            <span class="hero__result">{{ variant.variantResult }}</span>
          </li>
        </ul>

<script>
export default {
  name: "home",

  data() {
    return {
      heading: "56 Main Street",
      subheading: "Rethink The Way You Live. Discover Your Future",
      variants: [
        {
          variantId: 111,
          variantTitle: "Bedrooms",
          variantResult: 3
        },
        {
          variantId: 112,
          variantTitle: "Bathrooms",
          variantResult: 2
        },
        {
          variantId: 113,
          variantTitle: "Living Area",
          variantResult: 1850
        },
        {
          variantId: 114,
          variantTitle: "Parking",
          variantResult: 2
        }
      ]
    };
  }
};
</script>

Но как только я изменяю тег значка на такой вариант <font-awesome-icon :icon="variantIcon"/> и добавляю его в каждый из моих вариантов, например variants: [ { variantId: 111, variantTitle: "Bedrooms", variantResult: 3 variantIcon: faBed },, возникает следующая ошибка:

[Vue warn]: Ошибка в data (): «ReferenceError: faBed не определен»

Возможно ли это сделать?

Спасибо за вашу помощь в продвинутом.

...