Vue.js無法讀取空

的特性「長度」如果我這樣做：Vue.js無法讀取空

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

這顯示了即使有沒有初始負荷，但如果我的頁面加載它正常後刪除隱藏面板。所以唯一的問題似乎是它沒有正確檢測到沒有記錄的初始加載。

來源

2016-11-23 Citizen

。請問你的問題一個錯字;你說的第一個例子不起作用，但最後一個例子是完全一樣的，你說這是有效的。 – RyanZim

@RyanZim有，謝謝，再加上我做了更多的測試，但它仍然不起作用，所以我更新了問題。 – Citizen

@ RyanZim的回答有幫助。這是解決方案，以防其他人在未來通過搜索來到這裏。

問題出現在數據的初始狀態。例如，我有這樣的：

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

它適用於！== null，但不適用於檢查.length。稍後當它返回一個空對象時，.legnth將會工作，但不會爲空。

因此，解決辦法是保持它的正確類型的整個時間，這樣我可以運行一個一致的檢查：

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

來源

2016-11-23 00:51:06 Citizen

不確定它是否是錯字;如果將初始值設置爲空數組（[[]'）而不是空對象，則代碼的意圖會更清晰。 – RyanZim

我不是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 &&運算符將第一個語句;如果它是真的，它返回第二個語句的值。如果第一個陳述是虛假的，它會返回它的值。

v-show將表達式的結果強制轉換爲布爾值。

如果socialiteLogins是undefined或null，則返回該值，該值被強制爲false。

如果socialiteLogins是一個空數組，socialiteLogins就是truthy，所以&&返回第二個語句; socialiteLogins.length將爲0。這也將被強制爲false。

socialiteLogins如果與內容的陣列，socialiteLogins將truthy，和socialiteLogins.length將是一個非零數，這將被強迫到true。

來源

2016-11-23 00:39:22 RyanZim

Vue.js無法讀取空

回答

相關問題