TypeError: Cannot read property 'length' of undefined

[ahmedkhan847]

Version

2.3.4

Reproduction link

https://github.com/ahmedkhan847/commentwithlaravelandvue/blob/master/resources/assets/js/components/Comments.vue

Steps to reproduce

Working with vuejs as I upgraded to vuejs2 I am unable to get the length of an array exist within an array. I am unable to get its length inside a vuejs function but not in template.

<div class="form-row reply" v-if="comment.replies.length > 1">
                    <a v-if="viewcomment[index]" @click="showComments(index)">Hide comments {{comment.replies.length - 1}}</a>
                    <a v-else @click="showComments(index)">View more {{comment.replies.length - 1}} comments </a>
                </div>

What is expected?

I was expecting to get the length of array.

What is actually happening?

I am getting error "TypeError: Cannot read property 'length' of undefined"

[yyx990803]

This is not a valid repro because it's part of a project, and more like a question than a bug report. Please either reduce the scope to a minimal repro or ask via other channels instead.

@ahmedkhan847 v-if="comment.replies && comment.replies.length > 1" will do the trick.

Your data is empty when component is mounted (because you get it asynchronously), so you need an additional guard.

[shibnathroy]

@ahmedkhan847 v-if="comment.replies && comment.replies.length > 1" will do the trick.

Your data is empty when component is mounted (because you get it asynchronously), so you need an additional guard.

Thank You

[usmanbasharmal123]

just try this it will work
v-if="comment.replies!=undefined && comment.replies.length > 1"