我似乎无法删除已分配给用户uid的firebase上的记录，就像对象中的对象。
<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">
<div class="fill-height">
<v-container >
<a @click.prevent="deleteGigs(gig)" 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 nativeToast from 'native-toast'
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.id).remove())
console.log("Bamboozle!"+gig.id)
}
},
created: function() {
//data => console.log(data.user, data.credential.accessToken)
firebase.auth().onAuthStateChanged(user => {
if (user) {
gigRef.child(user.uid).on('child_added', snapshot => {
this.allGigs.push({...snapshot.val(), id: snapshot.key
})
if (snapshot.val().user !== this.authUser) {
nativeToast({
message: `New message by ${snapshot.val().authUser}`,
type: 'success'
})
}
})
gigRef.child(user.uid).on('child_removed', snapshot => {
const deleteGigs = this.allGigs.find(gig => gig.id === snapshot.key)
const index = this.allGigs.indexOf(deleteGigs)
this.allGigs.splice(index, 1)
if (snapshot.val().user !== this.authUser) {
nativeToast({
message: `Gig deleted by ${snapshot.val().authUser}`,
type: 'warning'
})
}
})
}
})
}
}
</script>
错误如下:
控制台日志错误:TypeError: Cannot read properties of undefined (reading 'id')
以下是firebase中的数据:
Object
z0Dk4aQodPhJk7DwgJZS0kWYAaH2:
-MjxHR5FjvNgB_cvp5Q3: {companydescription: 'nudream is a startup that creates applicacionts fo…siness and upgrades current apps from businesses ', companyname: 'NuDream', gigbenefits: 'Full paid, contract imss, schema mixto alot of benefits, with alot of things ', gigdate: '2021-09-19', gigdescription: 'we are actively looking for an ongoing poisition with strong front end skills!', …}
-MjxUCHolM-AW9pHL_gz: {companydescription: 'Canopy is developing innovative software to suppor… works, what doesn’t, and what could be improved.', companyname: 'Canopy', gigbenefits: 'Competitive salary with opportunities for performa… professional tools you need to do your best work', gigdate: '2021-09-22', gigdescription: 'Our team is growing! We’re seeking to fill several…ur software engineering and client success teams.', …}
-MjxUPZRLRhZ5xglpNAN: {companydescription: 'At GovExec, our mission is to inform and inspire g… in their work and make the world a better place.', companyname: 'Canopy', gigbenefits: 'Competitive salary with opportunities for performa… professional tools you need to do your best work', gigdate: '2021-09-19', gigdescription: 'As the market-leading information platform, for ov…remote work can be accommodated in select states.', …}
-Mjy4Hv3G18t1lZvI2Eq: {companydescription: 'This is the company description, we will see this in a second!', companyname: 'Gigmasters', gigbenefits: 'Lots of benefits!', gigdate: '2021-09-19', gigdescription: 'This is the Gig description!', …}
-Mjy9aKhAPNxNnWriF8K: {companydescription: 'As the market-leading information platform, for ov…s federal, defense, and state and local agencies.', companyname: 'NuStuff', gigbenefits: 'All you want!', gigdate: '2021-09-19', gigdescription: 'As the market-leading information platform, for ov…s federal, defense, and state and local agencies.', …}
-MjzJDQBvPcPgyoLahxN: {companydescription: 'esta es mi company description ', companyname: 'Nudream', gigbenefits: 'alll you want + incentives', gigdate: '2021-09-19', gigdescription: 'esta es mi description de gig ', …}
-Mk0OihUYZv8tQjnb7MS: {companydescription: ' adas dad aas das dasd ', companyname: 'a da da dad asd as d', gigbenefits: ' ada d sadsa dsad sad', gigdate: '2021-09-19', gigdescription: 'a da sdas das d ad sa', …}
[[Prototype]]: Object
这是在一个单独的子组件形式中推送数据的方式:
methods: {
addGig: function() {
messagesRef.child(this.newGig.userID).push(this.newGig);
this.newGig.vacanttype = '';
this.newGig.gigtitle = '';
this.newGig.gigdescription = '';
this.newGig.companyname = '';
this.newGig.companydescription = '';
this.newGig.giglocation = '';
this.newGig.gigdate = '';
this.newGig.gigbenefits = '';
this.newGig.gigskills = '';
this.newGig.priority = '';
toastr.success('Horray! message sent successfully');
this.displayText = 'Nice job!';
this.vacanttypeRules = true;
this.gigtitleRules = true;
this.gigdescriptionRules = true;
this.companynameRules = true;
this.companydescriptionRules = true;
this.gigskillsRules = true;
this.gigbenefitsRules = true;
this.giglocationRules = true;
this.priorityRules = true;
},
我想做什么:
Ui寻找更好的理解我想删除每个对象点击
你可以
<div
// ...
v-for="gig in allGigs":key="gig._key">
<div ...>
<v-container >
<!-- here is my delete button -->
<a @click.prevent="deleteGigs(gigs)" href="#" class="card-link"><v-icon color=red>mdi-delete</v-icon></a>
，但是根据错误信息，gigs没有在v-for中定义。
你应该这样做:
<a @click.prevent="deleteGigs(gig)"... //gig without "s"
或者，由于您的deleteGigs()方法如下，
deleteGigs(gigs) {
gigRef.child(gigs.id).remove()
}
您可以通过gig的id，如下所示:
<a @click.prevent="deleteGigs(gig.id)"...>
//...
deleteGigs(gigsId) {
gigRef.child(gigsId).remove()
}