为什么我这个icon尺量图显示不出来？但把它输出成文字，我设置的vue变量却起效果？

Question

看部分代码

<div v-for="(product, i) in inventory.slice(0,3)" :key="product.id" class="card">
  <div class="card-title">
      {{ product.name }}
  </div>

<i class="icofont-10x icofont-{{ product.icon }}"></i>   <!-- 启用本地json数据库的项目图标 -->
              <i>icofont-10x icofont-{{ product.icon }}</i>

明明我的JSON文件没问题呀，为什么这个不显示呢？

我的目的是想达成这样的效果，但我又不想一个一个输入icon全名，而改用v-for，借助JSON进行动态输出。可为什么不显示图标？
浏览器控制台也没有报错，搞得我完全没有头绪

Answer 1

<i class="icofont-10x icofont-{{ product.icon }}"></i>

改成这样试试

<i class="icofont-10x"  :class="'icofont-' + product.icon"></i>