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

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 软件供应链安全是跟可靠性有关还是跟安全性有关?
  • ¥15 电脑蓝屏logfilessrtsrttrail问题
  • ¥20 关于wordpress建站遇到的问题!(语言-php)(相关搜索:云服务器)
  • ¥15 【求职】怎么找到一个周围人素质都很高不会欺负他人,并且未来月薪能够达到一万以上(技术岗)的工作?希望可以收到写有具体,可靠,已经实践过了的路径的回答?
  • ¥15 Java+vue部署版本反编译
  • ¥100 对反编译和ai熟悉的开发者。
  • ¥15 带序列特征的多输出预测模型
  • ¥15 Python 如何安装 distutils模块
  • ¥15 关于#网络#的问题:网络是从楼上引一根网线下来,接了2台傻瓜交换机,也更换了ip还是不行
  • ¥15 资源泄露软件闪退怎么解决?