Vue.jsはヌル

Question

のプロパティ「長さ」を読み込めません：

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

パネルが非表示になりません。 socialiteLogins === nullを単独でチェックするか、==を使用してチェックすると、どちらもオブジェクトがnullでないことが返されます。しかし、それは間違いなくヌルです。私がページにそれをダンプすると、[]が結果として得られます。それは空のjsonオブジェクトです。だから私はしようとした場合、この：

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

パネルがまだ隠さないと、私はこのエラーを取得：

Cannot read property 'length' of null

をしかし、私はこれを行う場合は、次の

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

それはパネルを隠します初期ロード時には警告が全く出ませんが、後でsocialiteLogins変数を更新すると、空のjsonオブジェクトを再度返すと長さの警告が表示されます。どんな考え？

編集：

は、それに追加しています...私はこれを行う場合：

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

それは何も存在しないにもかかわらず、最初のロードに示し

が、私はページが読み込まそれを適切後にそれらを削除する場合パネルを隠す。したがって、唯一の問題は、レコードが存在しないことを適切に検出していない最初のローディングのように見えます。

Answer 1

@ RyanZimの回答が助けになりました。今後誰かが検索でここに来る場合の解決策は次のとおりです。

この問題は、データの初期状態から発生します。例えば、私はこれを持っていた！

のために働く

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

== nullではなく.LENGTHをチェックします。後で空のオブジェクトを返すと、.legnthは動作しますがnullではありません。

私は一貫性のチェックを実行できるように、だから、解決策は、適切な型全体の時間をそれを維持されています

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

Answer 2

私はVue.jsの専門家ではありませんが、一般的に以下の内容がJSに適用されます。

---

socialiteLoginsがnullまたはundefinedである場合、あなたはそれのlengthプロパティを読み取ることができません。これは、socialiteLoginsが配列、オブジェクト、または関数の場合のみ読み取ることができます。

Cannot read property 'length' of null

場合socialiteLoginsがundefinedであるか、空の配列、socialiteLogins !== null：あなたがメッセージを取得する理由です。ただし、socialiteLogins == null（これは緩やかな比較を使用していることに注意してください）。

socialiteLoginsが空の配列である場合でも、それは真実です。 v-showはそれをtrueとみなします。

これらの事実を組み合わせるとコードが機能しなくなります。あなたのケースでは

---

、私はこれがうまくいくと思う：

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

仕組み：JS &&オペレーターが最初の文を評価

。真実であれば、2番目のステートメントの値を返します。最初のステートメントが偽であれば、その値を返します。

v-showは、式の結果をブール値に強制します。

socialiteLoginsがundefinedまたはnullの場合、値はfalseに強制的に戻されます。

socialiteLoginsが空の配列の場合、socialiteLoginsは真実であるため、&&は2番目のステートメントを返します。 socialiteLogins.lengthは0になります。それはまたfalseに強制されます。

socialiteLogins内容を持つ配列である場合、socialiteLoginsはtruthyなり、socialiteLogins.lengthはtrueに強制する非ゼロ数、であろう。