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)"
                    >查看详情
                a>
              div>
            article>
          div>

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

页面无法显示contents中的内容

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

data中定义过contents没有？

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7689374
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue 解决v-for 循环列表生成不同背景颜色问题

你试试在页面打印index出现看看循环没，再排查是不是你页面代码写错了导致的。
{{index}}
然后你再看下你的图片哪里,采用下面这个require试试
:src="require(../../../../static/images/aaa/${content.url}.png)

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632