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>

Answer 2

通常您可以使用v-if 来简化此操作：

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