CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuejs3vue-props
Tom Pitt
Tom Pitt

Reputation: 23

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

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>

Upvotes: 2

Views: 2330

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to bind it using v-bind :

<i v-bind:class="IconName"></i>

Upvotes: 2

khalilw1
khalilw1

Reputation: 194

I think this part misses two dots before class

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

Upvotes: 3

Related Questions