Vue.js Kann nicht Eigenschaft 'Länge' von null

Question

lesen Wenn ich dies tun:

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

Das Panel verstecken sich nicht. Wenn ich socialiteLogins === null allein oder mit == überprüfe, geben beide zurück, dass das Objekt nicht null ist. Es ist aber definitiv null. Wenn ich es auf der Seite ablege, bekomme ich [] als Ergebnis. Es ist ein leeres Json-Objekt. Also, wenn ich versuche, dies:

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

Das Panel noch nicht verstecken und ich bekomme diese Fehlermeldung:

Cannot read property 'length' of null

Aber wenn ich dies tun:

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

Es verbirgt sich das Panel perfekt ohne Warnungen beim initialen Laden, aber wenn ich später die Variable socialiteLogins aktualisiere, erhalte ich die Längenwarnung, wenn es jemals wieder ein leeres json-Objekt zurückgibt. Irgendeine Idee warum?

Edit:

es Hinzufügen ... wenn ich dies tun:

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

Es auf Anfangslast zeigt, obwohl es keine gibt, aber wenn ich sie nach dem Laden der Seite entfernen Sie es richtig verbirgt das Panel. Das einzige Problem scheint das anfängliche Laden zu sein, bei dem es nicht richtig feststellt, dass keine Datensätze vorhanden sind.

Answer 1

@ RyanZims Antwort half. Hier ist die Lösung für den Fall, dass jemand in der Zukunft zu uns kommt.

Das Problem ergibt sich aus dem Ausgangszustand der Daten. Zum Beispiel hatte ich das:

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

Welche funktioniert für! == null, aber nicht für die Überprüfung. Länge. Später, wenn es ein leeres Objekt zurückgibt, wird .legnh funktionieren, aber nicht null.

So wird die Lösung es die richtige Art die ganze Zeit zu halten, so dass ich eine konsequente Prüfung durchführen kann:

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

Answer 2

Ich bin kein Experte für Vue.js, aber das folgende gilt für JS im Allgemeinen.

---

Wenn socialiteLoginsnull oder undefined ist, können Sie die length Eigenschaft es nicht lesen. Das kann nur gelesen werden, wenn socialiteLogins ein Array, Objekt oder eine Funktion ist. Deshalb sollten Sie die Meldung:

Cannot read property 'length' of null

Wenn socialiteLogins ist undefined oder ein leeres Array, socialiteLogins !== null. Jedoch, socialiteLogins == null (Beachten Sie, dass dies einen losen Vergleich verwendet).

Wenn socialiteLogins ein leeres Array ist, ist es immer noch truthy. v-show wird es als true betrachten.

Die Kombination dieser Fakten lässt Ihren Code nicht funktionieren.

---

In Ihrem Fall, ich denke, das wird funktionieren:

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

Wie es funktioniert:

Der JS && Bediener die erste Anweisung wertet; Wenn es truthy ist, gibt es den Wert der zweiten Anweisung zurück. Wenn die erste Aussage falsch ist, gibt sie ihren Wert zurück.

v-show erzwingt das Ergebnis des Ausdrucks zu einem booleschen Wert.

Wenn socialiteLoginsundefined oder null ist, gibt es diesen Wert, der false dazu gezwungen wird.

Wenn socialiteLogins ein leeres Array ist, ist socialiteLogins truthy, also gibt && die zweite Aussage zurück; socialiteLogins.length wird 0 sein. Das wird auch zu false gezwungen werden.

socialiteLogins Wenn ein Array mit Inhalt, wird socialiteLogins truthy sein und socialiteLogins.length wird eine von Null verschiedene Zahl sein, die true dazu gezwungen wird.