如何预先选择vue-select

时间:2019-08-24 10:26:07

标签: vue.js laravel-5 vue-select

我正在研究vue-select。我可以将vue-select值保存在数据库中,但是在编辑表单时,vue-select的select元素的v-model值不会出现在选择框中。

This is a screenshot of what I mean

    <v-select  id="guest_type" name="guest_type"  v-validate="'required'"  v-model="form.guest_type"  :options="getAllGuestTitle" :reduce="guest_title => guest_title.id" :label="`guest_title`" :class="{ 'is-invalid': form.errors.has('guest_type') }"  ></v-select>

这是我正在使用的脚本。

     <script>
            export default {
                name: "EditGuestComponent",
                mounted(){

                    this.$store.dispatch("allGuestTitle")


                    axios.get(`/api/edit-guest/${this.$route.params.id}`)
                        .then((respose) => {
                            this.form.fill(respose.data.guest)
                        })
                },
                computed:{
                    getAllGuestTitle(){
                        return this.$store.getters.getGuestTitle
                    },


                },
                data(){
                    return {
                        form: new Form({

                            guest_type:'',

                        })
                    }

                },
                methods:{
                    updateGuest(){
                        console.log(this.form.guest_type)
                        this.form.post('/api/update-guest')
                            .then((response) => {

                                this.form.guest_type = ''


                                this.$router.push('/guest-list')
                                Toast.fire({
                                    type: 'success',
                                    title: ' Guest Updated successfully'
                                })
                            })
                    }
                }
            }

        </script>

0 个答案:

没有答案