What I am trying to achieve:
I have been struggling to use the remove method from Firebase. I have read the documentation, but for some reason, it is not working as expected. Retrieving data using snapshot works fine, but when I try to delete using the remove method, nothing happens. Initially, I was getting an error on the reference until I used _key in the onClick button.
Although it logs some data to the console, it fails to delete the gigs/user/key object. Any thoughts on why this might be happening?
<template>
<v-container id="tutorials">
<h1>Gigs Available!</h1>
<!-- loop over the tutorials -->
<div class="Agrid d-grid">
<div
class="Amodule back"
v-for="gig in allGigs"
:key="gig._key">
<div class="fill-height">
<v-container >
<a @click.prevent="deleteGigs(gig._key)" class="card-link">
<v-icon color=red>mdi-delete</v-icon>
</a>
<br>
<div class="d-flex align-start">
<h3 class="j-title center mb-00">{{ gig.gigtitle}}</h3>
</div>
<h6 class="">{{gig.companyname}}</h6>
<v-row class="d-flex ">
<p class="col-tres mdi mdi-clock text--secondary"> {{ gig.vacanttype }} </p>
<p class="col-tres mdi mdi-earth text--secondary"> {{ gig.giglocation }} </p>
<p class="col-tres mdi mdi-calendar text--secondary">{{gig.gigdate}} </p>
</v-row>
<v-divider class="mx-4"></v-divider>
<h5 class="left text-body-2">Company description</h5><br>
<p class="content"> {{ gig.companydescription}}</p><br>
<h5 class="left text-body-2">Gig description</h5><br>
<p class="content"> {{ gig.gigdescription}}</p><br>
<h5 class="left text-body-2">Gig benefits</h5><br>
<p class="content"> {{ gig.gigbenefits}}</p><br>
<h5 class="left text-body-2">Skills</h5><br>
<p class="content"> {{ gig.gigskills}}</p><br>
</v-container>
</div>
</div>
</div>
<br>
</v-container>
</template>
<script>
import firebase from '@/plugins/firebase'
let db = firebase.database();
//let usersRef = db.ref('users');
let gigRef = db.ref('gigs');
export default {
name: 'EditGigs',
data: () => ({
authUser: null,
allGigs: [], // initialise an array
}),
methods: {
deleteGigs(gig) {
gigRef.child(gig).remove()
console.log(gigRef.child(gig))
}
},
created: function() {
//data => console.log(data.user, data.credential.accessToken)
firebase.auth().onAuthStateChanged(user => {
if (user) {
gigRef.once('value', snapshot => {
const val = snapshot.val()
if (val) {
this.allGigs = Object.values(val).flatMap(gigs =>
Object.entries(gigs).map(([ _key, gig ]) => ({ _key, ...gig})))
}
console.log(snapshot.val())
});
}
})
}
}
After clicking the delete button, I see this :
Reference {repo: Repo, path: Path, queryParams_: QueryParams, orderByCalled_: false}
orderByCalled_: false
path: Path {pieces_: Array(2), pieceNum_: 0}
queryParams_: QueryParams {limitSet_: false, startSet_: false, startNameSet_: false, endSet_: false, endNameSet_: false, …}
repo: Repo {repoInfo_: RepoInfo, app: FirebaseAppImpl, dataUpdateCount: 1, statsListener_: null, eventQueue_: EventQueue, …}
database: Database
key: "-MjxHR5FjvNgB_cvp5Q3"
parent: Reference
orderByCalled_: false
path: Path {pieces_: Array(1), pieceNum_: 0}
queryParams_: QueryParams {limitSet_: false, startSet_: false, startNameSet_: false, endSet_: false, endNameSet_: false, …}
repo: Repo {repoInfo_: RepoInfo, app: FirebaseAppImpl, dataUpdateCount: 1, statsListener_: null, eventQueue_: EventQueue, …}
database: Database
key: "gigs"
parent: Reference
ref: Reference
If I do this, it removes all the ref objects...
methods: {
deleteGigs(gig) {
gigRef.remove()
//console.log(gigRef.child(gig))
console.log(gig)
}
},