javascript - Vue.js - 渲染组件时出错

Question

数据在 firebase 上，我只想显示 1 个带有 [objectNumber] 的对象，请参阅模板中的 {{ligler[1].name}}，但是当我这样做时它有效但我收到错误:

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

我认为，问题在于组件之前加载的数据。

当我使用 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-if 添加到 h1，但这不起作用。

我该如何解决这个错误？

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>