Javascript Vue.js-呈现组件时出错

数据在firebase上，我只想显示一个带有[objectNumber]的对象，请参见模板中的

{{ligler[1].name}}

，但当我这样做时，它会工作，但会出现错误：

• 渲染组件时出错
• 未捕获类型错误：无法读取未定义的属性“名称”

我认为，问题是数据在组件之前加载

当我使用v-for时，它会显示所有对象的名称，没有错误，但我只想显示一个对象

该模板如下所示：

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

{{ligler[1].name}

剧本：

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

从“Firebase”导入Firebase
让配置={
apiKey:“xxxxxxxxx”，
authDomain:“XXXXXXXXX”，
数据库URL:“https://xxxxxxxxxx.firebaseio.com"
}
让app=Firebase.initializeApp（配置）；
设db=app.database（）；
设ligRef=db.ref（'ligler'）；
导出默认值{
名称：“应用程序”，
火基：{
利格勒：利格里夫
}
}

我试图将v-if添加到h1，但这不起作用

---

如何修复此错误？

按如下方式进行空检查：

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

---

通常，您可以通过使用

v-if

来简化此过程：

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

{{ligler[1].name}

console.log（ligRef）的输出是什么？把这一行放在exportU{u:Te，path:L，m:ee，Nc:false，然后：undefined…}之前是他的作品的输出！！！！你能解释一下为什么我必须添加ligler[1]&&&？只是为了识别利格勒？谢谢！！！v-if=“ligler[1]”也有效，哪一个更好用？@Saurahbh，我还有一个问题。。在我的数据中有ligler[1]。currentWeek和ligler[1]。weeks我如何将currentWeek设置为变量以使用它在ligler[1]中显示当前周。weeks？这很有效！这个解决方案比{{ligler[1]&&ligler[1].name}}好吗？这要看情况了。如果整个组件依赖于

ligler[1]

，则使用

v-If

，如果它只是组件的一小部分，则使用

&

。

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