В моем vue js хранилище приложений документ о конкретной вакансии имеет 3 коллекции: заявленные кандидаты, отобранные кандидаты и нанятые кандидаты, есть три таблицы для поданных отобранных и нанятых кандидатов, поданные кандидаты имеют кнопку для их включение в короткий список, который добавляет документ с идентификатором примененных кандидатов в коллекцию ShortlistedCandidates и отображает их в таблице коротких списков. То же самое и для таблицы из короткого списка, есть кнопка найма для их найма. Я помещаю данные каждой коллекции в массив list1, list2 и list3, чтобы отобразить их. Я вызываю три вычисленных свойства: application (), shortlisted () и hired () из created
applied() {
var u= firebase.auth().currentUser
let Ref = firebase.firestore().collection('Recruiter').doc(u.uid)
const thisIns = this
var Refs=Ref.collection('Jobs').doc(thisIns.id).collection("AppliedCandidates")
Refs.onSnapshot(function(snapshot){
snapshot.docChanges().forEach(function(change){
if(change.type ==="added"){
const uid= change.doc.id;
//console.log(change.doc.id)
const code = change.doc.data().StudentCode
firebase.firestore().collection('Students').doc(code).collection('Students').doc(uid).get().then(doc =>{
if(doc.exists){
const obj =doc.data()
obj.id= doc.id
Ref.collection("Jobs").doc(thisIns.id).collection("ShortlistedCandidates").doc(uid).get().then(doc=>{
if(doc.exists){
obj.button =true,
obj.b1 = 'Shortlisted'
}
else{
obj.button =false,
obj.b1 = 'Shortlist'
}
thisIns.list1.push (obj)
}).catch(err => {
console.log(err)
})
}
else{
console.log('notfound')
}
})
}else{
console.log('not found')
}
})
}, function(error){
console.log(error)
})
},
то же самое для shortlisted
shortlisted(){
var u= firebase.auth().currentUser
let Ref = firebase.firestore().collection('Recruiter').doc(u.uid)
const thisIns = this
var short=Ref.collection('Jobs').doc(thisIns.id).collection("ShortlistedCandidates")
short.onSnapshot(function(snapshot){
snapshot.docChanges().forEach(function(change){
if(change.type==="added"){
const uid= change.doc.id;
//console.log(change.doc.id)
const code = change.doc.data().StudentCode
firebase.firestore().collection('Students').doc(code).collection('Students').doc(uid).get().then(doc =>{
if(doc.exists){
const obj =doc.data()
obj.id= doc.id
Ref.collection("Jobs").doc(thisIns.id).collection("HiredCandidates").doc(uid).get().then(doc=>{
if(doc.exists){
obj.hired =true,
obj.b2 = 'Hired'
}
else{
obj.hired =false,
obj.b2 = 'Hire'
}
thisIns.list2.push (obj)
})
}
else{
console.log('notfound')
}
})
}else{
console.log('not found')
}
})
})
},
здесь obj.button означает, указывает ли кнопка короткого списка должен быть отключен или нет, и obj.b1 отображает текст, который должен быть написан на кнопке, таким образом, после нажатия кнопки короткого списка в таблице applicationstudent, кнопка должна стать отключенной, а также включенной в короткий список, и она должна отображаться в таблице кандидатов из короткого списка. Теперь проблема в что всякий раз, когда я нажимаю кнопку короткого списка, данные помещаются в Firestore коллекции shortlistedcandidates, а также отображаются в таблице sShortlisted, но кнопка shortlist не отключена и не меняется на 'Shortlisted', пока страница не обновится. Итак, как может статус кнопки изменяются в реальном времени без обновления