Selected value is not displayed in the select option in VueJS project

Viewed 331

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>
0 Answers
Related