0

我正在使用 vuejs、惯性和 laravel 框架。我正在使用注册表单输入用户记录。我在注册表加载时获取卖家和状态记录，并在道具中收到它们。当我使用提交按钮时，所有表单字段都通过 v-model 保存值，只有 form.seller 和 form.city 保持为空。请帮我找出我的错误。

注册表格.vue


    <template>
        <div>
            <div>
            <header-content> </header-content>
            </div>
            <div class="row">
            <div class="col-md-12">
                <!-- general form elements -->
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Create Registrations</h3>
                    </div>
                    <b-form>
                        <div class="card-body">
                            <base-input label="Name" v-model="form.name"/>
                            <base-input label="Email" v-model="form.email" />
                            <base-input type="password" label="Password" v-model="form.password" />
                            <base-input type="password" label="Confirm Password" v-model="form.confirmPwd" />
                            <base-input label="Contact No" v-model="form.contactno" />
    
                            <label for="Seller">Select Seller:</label>
                            <Select class="form-control" v-model="form.seller">
                                <option value="null"> Please Select Your Seller </option> 
                                <option v-for="type in this.$props.seller" :key="type.id" :value="type.id">{{ type.name }}</option>
                            </Select>
      
                            <label for="State">Select State:</label>
                             <select class="form-control"  v-model="form.state" v-on:change="getCities()">
                             <option :value="null"> Please Select State </option>
                             <option v-for="type in this.$props.states" :key="type.id" :value="type.id">{{ type.name }}</option>
                            </select>
    
                            <label for="State">Select City:</label>
                            <Select class="form-control" v-model="form.city">
                            <option :value="null"> Please Select City </option> 
                            <option v-for="type in this.cities" :key="type.id" :value="type.id">{{ type.name }}</option>
                            </Select>
                            <div class="w-100">
                            <button type="submit" size="lg" class="btn btn-primary" @click.prevent="SubmitRegistration">Submit</button>
                            </div>
                        </div>
                    </b-form>
                </div>
            </div>
    
        </div>
            <div>
                <footer-content> </footer-content>
            </div>
        </div>
    </template>
    
    <script>
    import BaseInput from './BaseInput';
    import SelectInput from '../../Shared/SelectInput';
    import axios from 'axios';
    import HeaderContent from '../Layouts/Header';
    import FooterContent from '../Layouts/Footer';
    import { required, minLength, between } from 'vuelidate/lib/validators'
    import VueIziToast from 'vue-izitoast';
    
    export default {
        components: {BaseInput,SelectInput,HeaderContent,FooterContent},
        props: ['states','seller'],
        data() {
            return{
                cities:[],
                form:{
                    name: '',
                    email: '',
                    password:'',
                    confirmPwd:'',
                    contactno: '',
                    state: '',
                    city: '',
                    seller: '',
                },
            }
        },
        validations: {
            form:{
                name:{
                    required
                },
                email:{
                    required
                },
                contactno:{
                    required
                },
                seller:{
                    required
                }
            }
        },
            
            methods:{
                     getCities(){
                           axios.get('/city-dropDownList/'+this.form.state)
                             .then(({ data })=> {
                              this.cities = data.cities;
                             })
                    },
                    SubmitRegistration(){
                        axios.post('submitRegistrationForm',this.form)
                        .catch(({ response }) => {
                            this.$toast.error(response.data.message, 'error', {timeout:3000});
                        }).then(({ data }) => {
                            this.$toast.success(data.message, 'success', {timeout:3000});
                        });
                    },
            } 
    }
    </script>
4

0 回答 0