JavaScript

I have a component for a tile where I want to provide the tile title, link name, and icon name via props into the component. This will make it reusable for me to provide the necessary data for multiple pages and links.

I can get the tile title and link name working but I can’t get the icon to show on the tile. As far as I can see on Devtools the string looks correct.

Note – Any feedback you might have on my code layout or use is very welcome!

Home.vue

<template>
  <section class="section">
    <div class="tile is-ancestor mt-1">
      <HomeTile
       :TileTitle='"User Details"'
       :IconName='"fas fa-user-astronaut fa-3x"'
       :LinkName='"User"'>
      </HomeTile>

HomeTile.vue (Component)

<template>
  <div class="tile is-parent">
    <router-link
      :to="{name: LinkName}"
      class="tile is-child box has-text-centered is-clickable">
      <span class="icon m-2">
        <i class="IconName"></i>
      </span>
      <p class="title m-2">{{ TileTitle }}</p>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeTile',

  props: {
    TileTitle: {
      type: String,
      required: true
    },
    LinkName: {
      type: String,
      required: true
    },
    IconName: {
      type: String,
      required: true,
      default: ''
    }
  }
</script>

Answer

I think this part misses two dots before class

      <span class="icon m-2">
        <i :class="IconName"></i>
      </span>

Vue Component – Passing a prop into a class is not working?

Advertisement

Answer