How to correctly get object length in JS

Question

This data is coming from the controller, and I have it in the mounted and in the data like so

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

I have this data, it's very long so I won't be posting it all but there should be 13 comments total.

{ 
   "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"
               }
            }
         ]
      },
   ]
}

I want to get the comments length so I tried {{forum.comments.length}} and am using it like this

<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>

How ever I get these errors

Error in render: "TypeError: Cannot read property 'length' of undefined"

Cannot read property 'length' of undefined at <div v-if="forum.comments.length === 0">

The code itself works, and does the expected but still gets those 2 errors always. What is the correct way to do this and get rid of these errors?

Answer 1

Assuming the explanation is your data is loaded asynchronously and not available at component rendering.

The solution is to wrap your template into a whole check for forum.comments existence to avoid rendering the block before data is loaded. For instance :

<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>