Vue.js - エラーコンポーネント

Question

をレンダリングするとき、データがfirebase上にある、と私はテンプレートで{{ligler[1].name}}を参照してください、私はこれを行うとき、それは動作しますが、私はエラーを取得[objectNumber]でのみ1のオブジェクトを表示したい：

• エラーコンポーネント
• 捕捉されない例外TypeErrorをレンダリング：私が思うに、未定義

のプロパティ 'name' を読み取ることができません、問題はそのダですコンポーネントの前にロードされます。

私はv-forを使用すると、エラーなしですべてのオブジェクトの名前を表示しますが、オブジェクトを1つだけ表示したいだけです。

<template> 
    <div id="app"> 
    <h1>{{ligler[1].name}}</h1> 
    </div> 
</template> 

スクリプトを：：

テンプレートは次のようになります

<script> 
import Firebase from 'firebase' 

let config = { 
    apiKey: "xxxxxxxxxx", 
    authDomain: "xxxxxxxxxx", 
    databaseURL: "https://xxxxxxxxxx.firebaseio.com" 
} 

let app = Firebase.initializeApp(config); 
let db = app.database(); 

let ligRef = db.ref('ligler'); 

export default { 
    name: 'app', 
    firebase: { 
    ligler: ligRef 
    } 
} 
</script> 

私はH1に、V-IFを追加しようとしましたが、それは動作しません。

このエラーを解決するにはどうすればよいですか？

Answer 1

このようなヌルチェック入れ：&&または||を使用して

<h1>{{ligler[1] && ligler[1].name}}</h1> 

をそれが必要でない場合、彼らは右辺を評価していないという意味論理演算子short circuitingと呼ばれています。これは簡潔さのためにwidely usedです。

ここでligler[1]が未定義の場合はligler[1].nameと評価されず、内部プロパティにアクセスする前にifを置くのと同じエラーは表示されません。

他のプロパティ（ligler[1]）にアクセスするコンポーネントが多い場合は、v-ifを使用するのがより理にかかります。

<div v-if="ligler[1]"> 
    <h1>{{ligler[1].name}}</h1> 
    <h1>{{ligler[1].age}}</h1> 
    <h1>{{ligler[1].etc}}</h1> 
    </div> 

Answer 2

通常あなたがv-ifを使用してこれを簡素化することができます。

<template> 
    <div id="app" v-if="ligler[1]"> 
    <h1>{{ligler[1].name}}</h1> 
    </div> 
</template>