I am trying to display only one object from the data on firebase using [objectNumber]. I want to show {{ligler[1].name}} in the template, but it is causing errors:
- Error when rendering component
- Uncaught TypeError: Cannot read property 'name' of undefined
I suspect that the issue arises because the data is loaded before the component.
Although using v-for displays the names of all objects without errors, I specifically want to display just one object.
The structure of the template is as follows:
<template>
<div id="app">
<h1>{{ligler[1].name}}</h1>
</div>
</template>
The script section looks like this:
<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>
I attempted adding a v-if condition to the h1 tag, but that did not resolve the issue.
How can these errors be fixed?