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 求解 yolo算法问题
  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝