Javascript 选定的值不会显示在VueJS项目的“选择”选项中

我构建了一个轮班计划器，作为一个更大的vuejs 2项目的一部分，带有一个Cloud Firestore数据库，当我尝试为任何员工设置一个特定日期的工作轮班时，从预定义列表中选择该轮班，该轮班会按预期保存在数据库中，但不会显示在所选的下拉列表中。这是我的密码：

<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>

---

我尝试了您的解决方案，但这在下次组件重新渲染之前仍然有效；当它显示时，它仍然没有显示值，因为selectedShift对象不再使用保存在数据库中的值填充。我没有提供解决方案。评论不是答案！我只是根据你的代码解释了我认为正在发生的事情。更改selectedShift后，某些内容会分配给它。找出什么或创建一个，以便其他人可以检查和调整它。从您所展示的情况来看，没有人能够提供解决方案，因为这还不足以重新编程。

<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>