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

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 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥15 (关键词-阻抗匹配,HFSS,RFID标签天线)
  • ¥15 机器人轨迹规划相关问题
  • ¥15 word样式右侧翻页键消失