Vue.js

Question

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

渲染组件时出错
未捕获类型错误：无法读取未定义的属性'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 meaning they don't evaluate the right hand side if it isn't necessary. This is 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>

Vue.js - 渲染组件时出错

Vue.js - error when rendering component

javascript

vuejs2