数据在firebase上,我想在[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,但这不起作用。
如何修复此错误?
答案 0 :(得分:2)
像这样放一个空检查:
<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>
答案 1 :(得分:1)
通常,您可以使用v-if
:
<template>
<div id="app" v-if="ligler[1]">
<h1>{{ligler[1].name}}</h1>
</div>
</template>