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

看部分代码

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

img

img


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

img

img


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


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

改成这样试试


<i class="icofont-10x"  :class="'icofont-' + product.icon"></i>
不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/1082709
  • 除此之外, 这篇博客: vue爬坑一：JSON数据接收成功，页面渲染失败中的 以下是正确代码： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    前端html部分

    <div class="indexContent" v-for="item in xin_body">
    <div class="indexContentTitle">
      <div>{{ item.article_id }}</div>
    </div>
</div>

    前端JS部分

    data() {
    return {
      xin_body:[],
      tranform: false
    }
},
created() {   
this.$http.get('http://localhost:9090/xin/index.php/Home/index/xinjson').then((success) => {
          // 请求成功，关闭loading
          this.tranform = false;
          // 由于请求成功返回的是Promise对象，我们要从success.body拿到数组
          this.xin_body = success.body;
        }, (error) => {
          console.log(error)
        })                                             
},

    后端API部分

    public function xinjson(){
    $data = M('article');
    $article = $data->select();
    // 指定允许其他域名访问
    header('Access-Control-Allow-Origin:*');
    // 响应类型
    header('Access-Control-Allow-Methods: GET,POST,PUT');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
    header('Content-Type:application/json; charset=utf-8');
    //$json = json_encode($article);
    $this -> ajaxReturn($article, 'JSON');
    //echo $article;
}

    在后端api里面添加了

    header('Content-Type:application/json; charset=utf-8');

    删去了

    $json = json_encode($article);

    前端没有改动.

    感谢大兵同学拿出宝贵的时间帮我解决问题，话说刚结束不就就去陪女朋友了。（手动白眼）我乖乖的继续我的代码。
    大兵同学的博客：

    http://geekhelp.cn/
  • 以下回答来自chatgpt:

    抱歉，您的问题似乎有些不清楚，请提供更具体的相关信息和背景，我才能更好地理解并提供有针对性的解决方案。谢谢。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^