如何使用vuex将子组件中的数据和功能使用到另一个组件中?

时间:2019-05-10 20:11:55

标签: php laravel vue.js vuex

我必须创建一个由2个外键构成的主管对象, 这些外键是user_id(因此它具有用户字段)+ program_id(学院中的一个程序)。要做好,我必须使用2个组件。首先将具有用于用户注册的所有用户字段。其次,将有主管程序。父组件将是主管,在该组件中,我要使用用户组件。通过这种方式,我要使用来自用户组件的字段数据并将它们用于主管组件,当我按下创建按钮时,它将发送来自的所有数据(从用户组件创建的user_id,从选择列表添加的supervisor_program)并通过axios发送到我的api路由。

主管表格文件

<template>
    <div>
        <md-card class="md-layout-item md-size-100 md-small-size-100">
            <md-card-header>
                <div class="md-title">Inscription d'un superviseur</div>
            </md-card-header>
            <inscription-view :user="user"></inscription-view>
            <md-card-content>
                <div class="md-layout md-gutter">
                    <div class="md-layout-item md-small-size-100">
                        <md-field :class="getValidationProgramClass('programme')">
                            <label for="programme">Programme</label>
                                <md-select v-model="superviseur.programme.id" name="programme" id="programme" :disabled="sending">
                                <md-option value="" disabled>Choisissez un programme...</md-option>
                                <md-option v-for="p in programmes" :key="p.id" :value="p.id">
                                    {{ p.nom }}
                                </md-option>    
                            </md-select>
                            <span class="md-error" v-if="!$v.superviseur.programme.required">Le champ 'programme' est requis</span>
                        </md-field>
                    </div>
                </div>
            </md-card-content>
            <md-card-actions>
                <md-button @click="cancel()" class="md-raised md-accent">Annuler</md-button>
                <md-button @click.prevent="validaterChamps()" class="md-raised md-primary" :disabled="sending">Créer</md-button>
            </md-card-actions>

            <md-progress-bar md-mode="indeterminate" v-if="sending" />
        </md-card>
    </div>
</template>

<script>
    import lodash from 'lodash'
    import axios from 'axios'
    import VueMaterial from 'vue-material'
    import { validationMixin } from 'vuelidate'
    import { required, minLength, maxLength, between, sameAs } from 'vuelidate/lib/validators'
    import inscription from '../utilisateur/Inscription.vue'

    export default {
        middleware: 'auth',
        components:{ VueMaterial, validationMixin, 'inscription-view': inscription },
        mixins: [validationMixin],
        name: 'SuperviseurFormulaire',

        data: () => ({
            programmes: {},
            user: inscription.data(),
            superviseur: {
                user: this.user,
                programme: {},
            },
            superviseurSaved: false,
            sending: false
        }),
        validations: {
            user: {
                nom: {
                    required,
                    minLength: minLength(4),
                    maxLength: maxLength(40)
                },
                prenom: {
                    minLength: minLength(4),
                    maxLength: maxLength(40)
                },
                courriel: {
                    required,
                    minLength: minLength(15),
                    maxLength: maxLength(40)
                },
                telephone: {
                    minLength: minLength(10),
                    maxLength: maxLength(15)
                },
                login: {
                    required,
                    maxLength: maxLength(20)
                },
                password: { 
                    required, 
                    minLength: minLength(6) },
                password_confirmation: { 
                    required, 
                    sameAsPassword: sameAs('password')
                }
            },
            superviseur: {
                programme: {
                    required
                }
            }

        },
        mounted() {
            this.chargeProgrammes();
        },
        methods:{
            /**
             * Appel ajax pour charger la liste des programmes.
             */
            chargeProgrammes() {
                axios.get('/api/programmes')
                .then(response => {
                    this.programmes = response.data.programmes;
                    this.etat = "charge";  
                })
            },
            /**
             * Permet de retourner vers la page précédante.
             */
            cancel () {
                this.$router.go(-1)
            },
            getValidationUserClass (fieldName) {
                const field = this.$v.user[fieldName]

                if (field) {
                    return {
                        'md-invalid': field.$invalid && field.$dirty
                    }
                }
            },
            getValidationProgramClass (fieldName) {
                const field = this.$v.superviseur.programme[fieldName]

                if (field) {
                    return {
                        'md-invalid': field.$invalid && field.$dirty
                    }
                }
            },
            validaterChamps () {
                this.$v.$touch()
                if (!this.$v.$invalid) {
                    this.creer()
                }
            },
            /**
             * Appel ajax pour sauvegarder la ressource.
             */
            async creer() {
                this.sending = true

                this.$children.validaterChamps()
                // Fetch the user.
                this.user = await this.$store.dispatch('auth/fetchUser')

                axios.post('/api/superviseurs/createApi', this.superviseur)
                    .then(response => {
                        this.superviseurSaved = true
                        this.$router.push({name: 'superviseurs'})

                    })
                    .catch(e => {
                        if(e.response.status==422) {
                            this.erreurs = e.response.data.errors;
                        } else {
                            window.alert('Noop')

                            // this.$swal("Une erreur s'est produite")
                        }
                    this.sending = false
                    });
            },
        }

    }
</script>

<style lang="scss" scoped>
  .md-progress-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
</style>


用户订阅文件

<template>
    <div>
        <form class="md-layout">
            <md-card class="md-layout-item md-size-100 md-small-size-100">
                <md-card-content>
                    <div class="md-layout md-gutter">
                        <div class="md-layout-item md-small-size-100">
                            <md-field :class="getValidationUserClass('nom')">
                                <label>Nom</label>
                                <md-input v-model="user.nom" :disabled="sending" placeholder="Votre nom"></md-input>
                                <span class="md-error" v-if="!$v.user.nom.required">Le champ 'nom' est requis</span>
                                <span class="md-error" v-else-if="!$v.user.nom.minLength">Nom invalide, trop court</span>
                                <span class="md-error" v-else-if="!$v.user.nom.maxLength">Nom invalide, trop long</span>
                            </md-field>

                            <md-field :class="getValidationUserClass('prenom')">
                                <label>Prénom</label>
                                <md-input v-model="user.prenom" :disabled="sending" placeholder="Votre prénom"></md-input>
                                <span class="md-error" v-if="!$v.user.prenom.minlength">Prénom invalide, trop court</span>
                                <span class="md-error" v-else-if="!$v.user.prenom.maxlength">Prénom invalide, trop long</span>
                            </md-field>

                            <md-field :class="getValidationUserClass('courriel')">
                                <label>Courriel</label>
                                <md-input v-model="user.courriel" :disabled="sending" placeholder="Votre courriel"></md-input>
                                <span class="md-error" v-if="!$v.user.courriel.required">Le champ 'courriel' est requis</span>
                                <span class="md-error" v-else-if="!$v.user.courriel.minlength">Courriel invalide, trop court</span>
                                <span class="md-error" v-else-if="!$v.user.courriel.maxlength">Courriel invalide, trop long</span>
                            </md-field>

                            <md-field :class="getValidationUserClass('telephone')">
                                <label>Téléphone</label>
                                <md-input v-model="user.telephone" :disabled="sending" placeholder="Votre téléphone"></md-input>
                                <span class="md-error" v-if="!$v.user.telephone.minlength">Téléphone invalide, trop court</span>
                                <span class="md-error" v-else-if="!$v.user.telephone.maxlength">Téléphone invalide, trop long</span>
                            </md-field>

                            <md-field :class="getValidationUserClass('login')">
                                <label>Login</label>
                                <md-input v-model="user.login" :disabled="sending" placeholder="Votre identifiant"></md-input>
                                <span class="md-error" v-if="!$v.user.login.required">Le champ 'login' est requis</span>
                                <span class="md-error" v-else-if="!$v.user.login.maxlength">Login invalide, trop long</span>
                            </md-field>

                            <md-field :class="getValidationUserClass('password')">
                                <label>Mot de passe</label>
                                <md-input v-model="user.password" :disabled="sending" placeholder="Votre mot de passe" type="password" name="password"></md-input>
                                <span class="md-error" v-if="!$v.user.password.required">Le champ 'mot de passe' est requis</span>
                                <span class="md-error" v-else-if="!$v.user.password.minlength">Mot de passe invalide, trop court</span>
                            </md-field>

                            <md-field :class="getValidationUserClass('password_confirmation')">
                                <label>Confirmez le mot de passe</label>
                                <md-input v-model="user.password_confirmation" :disabled="sending" placeholder="Votre confirmation de mot de passe" type="password" name="password_confirmation"></md-input>
                                <span class="md-error" v-if="!$v.user.password_confirmation.required">Le champ 'confirmation de mot de passe' est requis</span>
                                <span class="md-error" v-else-if="!$v.user.password_confirmation.sameAsPassword">Les mots de passe doivent correspondent</span>
                            </md-field>
                        </div>
                    </div>
                </md-card-content>
                <!--
                <md-card-actions>
                    <md-button @click="retour()" class="md-raised md-accent">Annuler</md-button>
                    <md-button @click.prevent="validaterChamps()" class="md-raised md-primary" :disabled="sending">Continuer</md-button>
                </md-card-actions>
                <md-progress-bar md-mode="indeterminate" v-if="sending" />
                -->
            </md-card>
        </form>
    </div>
</template>

<script>

    import lodash from 'lodash'
    import axios from 'axios'
    import Form from 'vform'
    import VueMaterial from 'vue-material'
    import { validationMixin } from 'vuelidate'
    import { required, minLength, maxLength, between, sameAs  } from 'vuelidate/lib/validators'

    export default {
        middleware: 'auth',
        components:{ VueMaterial, validationMixin },
        name: 'Inscription',
        mixins: [validationMixin],

        data: () => ({
            user: {
                nom: '',
                prenom: '',
                courriel: '',
                telephone: '',
                login: '',
                password: '',
                password_confirmation: ''
            },
            erreurs: {},
            sending: false,
        }),

        validations: {
            user: {
                nom: {
                    required,
                    minLength: minLength(4),
                    maxLength: maxLength(40)
                },
                prenom: {
                    minLength: minLength(4),
                    maxLength: maxLength(40)
                },
                courriel: {
                    required,
                    minLength: minLength(15),
                    maxLength: maxLength(40)
                },
                telephone: {
                    minLength: minLength(10),
                    maxLength: maxLength(15)
                },
                login: {
                    required,
                    maxLength: maxLength(20)
                },
                password: { 
                    required, 
                    minLength: minLength(6) },
                password_confirmation: { 
                    required, 
                    sameAsPassword: sameAs('password')
                }  
            }


        },
        methods: {

            validaterChamps () {
                this.$v.$touch()

                if (!this.$v.$invalid) {
                    this.register()
                }
            },
            getValidationUserClass (fieldName) {
                const field = this.$v.user[fieldName]

                if (field) {
                    return {
                        'md-invalid': field.$invalid && field.$dirty
                    }
                }
            },

            register () {
                this.sending = true
                axios.post('/api/inscription', this.user)
                    .then(response => {
                         // Save the token.
                        this.$store.dispatch('auth/saveToken', { token })

                        // Update the user.
                        this.$store.dispatch('auth/updateUser', { user: user }) 

                    })
                    .catch(e => {
                        if(e.response.status==422) {
                            this.erreurs = e.response.data.errors;
                        } else {
                            window.alert('Noop')

                            // this.$swal("Une erreur s'est produite")
                        }
                    this.sending = false
                    });


            }
        }
    }
</script>

<style lang="scss" scoped>
  .md-progress-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
</style>

当我按下执行validerChamps()的按钮时,它应该尝试检查程序是否有效,如果字段有效,则发送到题词视图,然后将一个emit方法发回给他准备好保存的主管组件然后将user_id发送到主管组件。同样,一旦主管获取到user_id,它将通过axios将包含程序的user_id和主管对象发送到与主管Crud相关的控制器。

0 个答案:

没有答案