Transitioning to Vue.js from SQL programming has been a bit of a challenge, but I'm getting there. Currently, I am using vuefire according to the specifications and even manually inserting the correct key from my Firebase database with one record and one field to test it out. However, I am not seeing anything being returned or displayed.
I would really appreciate some guidance on how to achieve that and populate my form with just one value. Once I get that sorted, the possibilities are endless. Thank you for any assistance.
ERROR MESSAGE: vue.common.js?e881:481 [Vue warn]: Error in mounted hook: "ReferenceError: residentsArray is not defined"
<template>
<div class="edit">
<div class="container">
<p style="margin-bottom:10px;font-weight:800;">EDIT RECORD</p><br>
<form id="form" v-on:submit.prevent="updateResident">
<fieldset class="form-group">
<label for="first_name">Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" v-model="currentResident.name">
</fieldset>
<input type="submit" class="btn btn-primary" value="Add New Resident">
</form>
</div>
</div>
</template>
<script>
import firebase from 'firebase'
let editConfig = {
apiKey: "123456789",
authDomain: "myapp.firebaseapp.com",
databaseURL: "https://myapp.firebaseio.com",
projectId: "my",
storageBucket: "myapp.appspot.com",
messagingSenderId: "1234567890"
};
var firebaseApp = firebase.initializeApp(editConfig, "Edit")
var db = firebaseApp.database()
let residentsReference = db.ref('residents')
export default {
name: 'Edit',
mounted() {
this.currentResident.name = residentsArray.name;
},
firebase: {
residentsArray: residentsReference.child('-KpzkbA6G4XvEHHMb9H0')
},
data () {
return {
currentResident: {
name: ''
}
}
},
methods: {
updateResident: function () {
// Update record here
}
}
}
</script>