Question

数据在firebase上，我想在[objectNumber]中只显示一个对象，在模板中看到{{ligler[1].name}}，但是当我这样做时它会起作用但是我得到错误：

呈现组件时出错
未捕获的TypeError：无法读取属性＆＃39; name＆＃39;未定义的

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

当我使用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。

如果您有更多组件可以访问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>

Vue.js - 渲染组件时出错

2 个答案: