Vue.js - 錯誤呈現部件

Question

的數據時，是火力點，我想只顯示1對象與[objectNumber]見{{ligler[1].name}}的模板，但我這樣做時，它的工作原理，但我得到的錯誤：

• 錯誤呈現部件
• 遺漏的類型錯誤時：未定義

我覺得無法讀取屬性「名」，問題是，大ta在組件之前加載。

當我使用v-for時，它顯示所有沒有錯誤的對象的名稱，但我只想顯示一個對象。

模板的樣子：

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

我試圖V-如果添加到H1，但不起作用。

我該如何解決這個錯誤？

Answer 1

把空校驗是這樣的：

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

使用&&或||被稱爲邏輯運算符short circuiting這意味着，如果沒有必要，他們不評價的右手邊。由於簡潔，這是widely used。

這裏如果ligler[1]未定義，它將不會計算ligler[1].name並且您將不會收到錯誤，這相當於在訪問內部屬性之前放置if。

使用v-if如果你有更多的組件可以訪問ligler[1]的其他屬性，那麼更合理，否則上面的代碼更好。

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