Laravel 如何正确获取JS中的对象长度

这些数据来自控制器，我把它放在挂载的数据中，就像这样

data() {
    return {
        forum: [],
    }
},
mounted() {
    if (this.$page.forum) {
        this.forum = this.$page.forum;
    }
}

我有这个数据，它很长，所以我不会张贴它所有，但应该有13条评论总数

{ 
   "id":1,
   "theme":"werwer",
   "description":"werwer",
   "user_id":1,
   "anonymous":0,
   "start_date":"2019-12-01 06:00:00",
   "end_date":"2019-12-20 12:00:00",
   "created_at":"2019-12-04 12:00:50",
   "updated_at":"2019-12-09 08:15:47",
   "user":{ 
      "id":1,
      "name":"sadmin",
      "card":"1111",
      "scard":"123",
      "user_type_id":1,
      "email":"sadmin@gmail.com",
      "created_at":"2019-12-04 12:00:14",
      "updated_at":"2019-12-04 12:00:14"
   },
   "comments":[ 
      { 
         "id":5,
         "user_id":1,
         "discussion_forum_id":1,
         "parent_id":3,
         "comment":"Este comentario ha sido eliminado.",
         "comment_time":"2019-12-09 08:58:10",
         "deleted":1,
         "created_at":"2019-12-04 12:09:19",
         "updated_at":"2019-12-09 08:58:10",
         "user":{ 
            "id":1,
            "name":"sadmin",
            "card":"1111",
            "scard":"123",
            "user_type_id":1,
            "email":"sadmin@gmail.com",
            "created_at":"2019-12-04 12:00:14",
            "updated_at":"2019-12-04 12:00:14"
         },
         "replies":[ 
            { 
               "id":6,
               "user_id":1,
               "discussion_forum_id":1,
               "parent_id":5,
               "comment":"reply to reply",
               "comment_time":"2019-12-04 12:15:19",
               "deleted":0,
               "created_at":"2019-12-04 12:15:19",
               "updated_at":"2019-12-04 12:15:19",
               "user":{ 
                  "id":1,
                  "name":"sadmin",
                  "card":"1111",
                  "scard":"123",
                  "user_type_id":1,
                  "email":"sadmin@gmail.com",
                  "created_at":"2019-12-04 12:00:14",
                  "updated_at":"2019-12-04 12:00:14"
               }
            }
         ]
      },
   ]
}

我想得到评论的长度，所以我尝试了{{forum.comments.length}}，并像这样使用它

<div v-if="forum.comments.length === 0">
    <el-card>
        <p>
          No comments!
        </p>
    </el-card>
</div>
<div v-else>
    <div v-for="comment in forum.comments">
        <el-card>
            //show comments
        </el-card>
    </div>
</div>

我怎么会犯这些错误

呈现中出错：TypeError:无法读取未定义的属性“length”

无法在处读取未定义的属性“length”

---

代码本身可以工作，并执行预期的操作，但始终会出现这两个错误。如何正确地执行此操作并消除这些错误？

假设您的数据是异步加载的，并且在组件渲染时不可用

解决方案是将模板包装成一个完整的forum.comments检查，以避免在加载数据之前呈现块。例如：

<template v-if="forum && Array.isArray(forum.comments)">
  <div v-if="forum.comments.length === 0">
      <el-card>
          <p>
            No comments!
          </p>
      </el-card>
  </div>
  <div v-else>
      <div v-for="comment in forum.comments">
          <el-card>
              //show comments
          </el-card>
      </div>
  </div>
</template>

---

数据是否来自api？在检索数据之前，forum.comments最初可能为空，但在装载数据之后，它会按照您通常所说的那样呈现。尝试v-if=forum.comments==未定义| | forum.comments.length==0请在chrisbyte+1处检查此项。警告：只有当论坛以{}作为值进行初始化，或者仍然会抛出原语类型的错误时，它才会起作用。无论如何，它是可链接的：v-if=forum&&forum.comments&&forum.comments.length==0问题不在于forum对象，而在于vue.js组件的数据初始化。您的组件代码段无权访问论坛对象。因此，您可以发布相关的vue.js组件脚本和数据模型吗。@chrisbyte我已经编辑了这个问题，添加了数据的来源