Vue.js Cannot read property 'length' of null

Question

If I do this:

<div class="panel panel-default" v-if="socialiteLogins !== null">

The panel doesn't hide. If I check socialiteLogins === null alone, or with ==, they both return that the object isn't null. It's definitely null though. If I dump it on the page, I get [] as the result. It's an empty json object. So if I try this:

<div class="panel panel-default" v-if="socialiteLogins.length !== 0">

The panel still doesn't hide and I get this error:

Cannot read property 'length' of null

But If I do this:

<div class="panel panel-default" v-if="socialiteLogins !== null && socialiteLogins.length !== 0">

It hides the panel perfectly with no warnings on initial load but when I update the socialiteLogins variable later I get the length warning if it ever returns an empty json object again. Any idea why?

Edit:

Adding to it... if I do this:

<div class="panel panel-default" v-show="socialiteLogins">

It shows on initial load even though there are none, but if I remove them after the page loads it properly hides the panel. So the only issue appears to be the initial loading where it's not properly detecting that there are no records.

Perhaps there is a typo in your question; the first example you say doesn't work, but the final example is exactly the same and you say that works. — RyanZim
– RyanZim, Commented Nov 23, 2016 at 0:15
@RyanZim There was, thanks, plus I did more testing and it still doesn't work so I updated the question. — Citizen
– Citizen, Commented Nov 23, 2016 at 0:17

RyanZim · Accepted Answer · 2016-11-23 00:39:22Z

15

I am no expert on Vue.js, but the following applies to JS in general.

If socialiteLogins is null or undefined, you can't read the length property of it. That only can be read if socialiteLogins is an array, object, or function. That is why you get the message:

Cannot read property 'length' of null

If socialiteLogins is undefined or an empty array, socialiteLogins !== null. However, socialiteLogins == null (Note that this is using loose comparison).

If socialiteLogins is an empty array, it is still truthy. v-show will regard it as true.

The combination of these facts is making your code not work.

In your case, I think this will work:

 <div class="panel panel-default" v-show="socialiteLogins && socialiteLogins.length">

How it works:

The JS && operator evaluates the first statement; if it is truthy, it returns the value of the second statement. If the first statement is falsy, it returns its value.

v-show coerces the result of the expression to a boolean.

If socialiteLogins is undefined or null, it returns that value, which is coerced to false.

If socialiteLogins is an empty array, socialiteLogins is truthy, so && returns the second statement; socialiteLogins.length will be 0. That will be coerced to false as well.

If socialiteLogins is an array with contents, socialiteLogins will be truthy, and socialiteLogins.length will be a non-zero number, which will be coerced to true.

answered Nov 23, 2016 at 0:39

RyanZim

7,0451 gold badge32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lbris Over a year ago

IMO, Citizen answer below is better. For me it's better to define an initial state rather than adding checks everywhere. What if you must check this condition 10 times in your template ? Defining a state like socialiteLogins: [] in data of your view component is for me a better solution.

Citizen · Accepted Answer · 2021-11-01 20:42:56Z

14

@RyanZim's answer helped. Here's the solution in case anyone else comes here by search in the future.

The issue arises from the initial state of the data. For instance, I had this:

data: function() {
    return {
        socialiteLogins: null
    }
},

Which works for !== null but not for checking .length. Later when it returns an empty object, .legnth will work but not null.

So the solution is keeping it the proper type the entire time so that I can run a consistent check:

data: function() {
    return {
        socialiteLogins: []
    }
},

edited Nov 1, 2021 at 20:42

answered Nov 23, 2016 at 0:51

Citizen

13.1k27 gold badges81 silver badges120 bronze badges

1 Comment

RyanZim Over a year ago

Not sure if it's a typo or not; the intent of your code would be clearer if you set the initial value to an empty array ([]), instead of an empty object.

Saeed · Accepted Answer · 2020-05-07 11:47:04Z

3

Here is the tip for you.

<div class="panel panel-default" v-if="Object.keys(socialiteLogins).length > 0">

and here we go that's all.

mark as answered.

answered May 7, 2020 at 11:47

Saeed

1341 silver badge6 bronze badges

Collectives™ on Stack Overflow

Vue.js Cannot read property 'length' of null

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related