weixin_53201607 2022-11-27 19:58 采纳率: 76.9%
浏览 29
已结题

vue中v-for循环无法显示列表数据

vue3接收从后端返回数据之后将返回的列表赋给data中的contents列表,在html中用v-for循环呈现列表内容失败
javascript中mounted获取后端返回值并给contents列表赋值的函数如下

getAllArticle(1)
      .then(res => {
        this.contents = res.data;
        console.log(this.contents);
      })
      .catch(() => {});

html段中v-for循环显示contents中各属性的值

<div class="box" v-for="(content, index) in contents" :key="index">
            <article class="media">
              <figure class="media-left">
                <p class="image is-64x64">
                  <img
                    :src="require(`../../assets/${content.user.userImg}`)"
                    class="size"
                  />
                </p>
              </figure>
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>发帖人用户名:{{ content.user.userName }}</strong>

                    <br />
                    发帖标题:{{ content.article.artTitle }}
                  </p>
                </div>
                <nav class="level is-mobile">
                  <div class="level-left">
                    <a class="level-item">
                      <span class="icon is-small">
                        <i class="fas fa-comment-dots"></i>
                      </span>
                      {{ content.article.artComNum }}
                    </a>

                    <a class="level-item">
                      <span class="icon is-small">
                        <i class="fas fa-heart"></i>
                      </span>
                      {{ content.article.artLikeNum }}
                    </a>
                  </div>
                </nav>
              </div>
              <div class="media-right">
                <a class="navbar-item" slot="trigger" role="button">
                  <b-button type="is-info" outlined @click="detail(index)"
                    >查看详情</b-button
                  >
                </a>
              </div>
            </article>
          </div>


浏览器中运行,控制台输出contents内容如下

img

img

img

页面无法显示contents中的内容

img

请问是哪里出了问题,该怎么解决。

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-11-27 20:37
    关注

    data中定义过contents没有?

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 12月6日
  • 已采纳回答 11月28日
  • 创建了问题 11月27日

悬赏问题

  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度
  • ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测