Vue 组件 - 将道具传递到 class 不起作用？

Question

我有一个磁贴组件，我想在组件中通过道具提供磁贴标题、link 名称和图标名称。这将使我可以重复使用它来为多个页面和 links.

提供必要的数据

我可以使用磁贴标题和 link 名称，但无法在磁贴上显示图标。据我在 Devtools 上看到的，字符串看起来是正确的。

注意 - 非常欢迎您对我的代码布局或使用提出任何反馈！

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（组件）

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

我认为这部分在 class

之前漏掉了两个点

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

Answer 2

尝试使用v-bind绑定它：

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

Vue 组件 - 将道具传递到 class 不起作用？

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

javascript

vue.js

vue-component

vuejs3

vue-props