I build a shift planner as part of a larger vuejs 2 project, with a Cloud Firestore database, and when I try to set a work shift for a specific day for any employee, selecting the shift from a predefined list, the shift is saved in the database as expected, but it is not displayed on the dropdown as being selected. Here is my code:
<template>
<div>
<select v-model="selectedShift" @change="saveShift">
<option :value="{start:'00:00',end:'00:00',name:'',abreviation:'',duration:0,adjustedReason:''}"></option>
<option v-for="shift in shifts" :key="shift.name" :value="shift">{{ shift.abreviation }}</option>
</select>
</div>
<script>
import {db} from '@/firebase/init'
import randomstring from 'randomstring';
export default {
props: ['employee','date'],
data(){
return{
shifts: [],
selectedShift: '',
shift: {
start:'00:00',
end:'00:00'
},
//in order to get a unique name for each modal
modalName: '',
modalNameSent: ''
}
},
methods:{
saveShift(){
let id = `${this.employee.id}${this.date}`
db.collection('shifts').doc(id).update(this.selectedShift)
}
},
created(){
//retrieve defined shifts from db
db.collection('shifts_definition').where('service_id','==',this.employee.service_id).get().then(docs=>{
docs.forEach(doc=>{
this.shifts.push(doc.data())
})
})
let id = `${this.employee.id}${this.date}`;
let ref = db.collection('shifts').doc(id)
ref.onSnapshot(doc=>{
if(!doc.exists){
ref.set({
uid: randomstring.generate({length: 12,charset: 'alphabetic'}),
service_id: this.employee.service_id,
employee_id: this.employee.id,
adjustedReason:'',
date: this.date,
start:'00:00',
end:'00:00',
duration:0,
name:'',
abreviation:'',
})
}else{
this.selectedShift = doc.data()
this.shift = doc.data()
this.shift.id = doc.id
this.modalName = doc.data().uid
this.modalNameSent = '#'+doc.data().uid
}
});
}
}
</script>