Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
raamia
Messages : 1
Enregistré le : 23 nov. 2020, 18:03

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

Message par raamia » 23 nov. 2020, 18:11

Bonjour à tous,

J'ai vraiment besoin de votre aide.

En fait, je suis débutante dans le développement, je connais très peu de chose.
Le problème est que je n'arrive pas à me loguer sur mon application (Js) installé en local sur ma machine.

Lorsque je tente de me connecter, j'ai le message d'erreur suivant:
Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

Cette erreur me renvoit sur la ligne : this.errorMsg = err.response.data.error

Code : Tout sélectionner

<template>
    <div>
        <div class="c-app flex-row align-items-center">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card-group">
                            <div class="card p-4">
                                <div class="card-body">
                                    <h3>Connexion - Policier</h3>
                                    <p class="text-muted">Connectez-vous pour démarrer la session</p>
                                    <validation-observer ref="observer" v-slot="{ handleSubmit }">
                                        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
                                            <validation-provider name="Pseudo" 
                                                :rules="{required: true, min: 4}"
                                                v-slot="validationContext">
                                                <b-form-group id="email-group" label="Pseudo" label-for="email">
                                                    <b-form-input type="text" id="email" name="email" autocomplete="off"
                                                                v-model="form.email" 
                                                                :state="getValidationState(validationContext)"
                                                                aria-describedby="email-feedback">
                                                    </b-form-input>
                        
                                                    <b-form-invalid-feedback id="email-feedback">
                                                        {{ validationContext.errors[0] }}
                                                    </b-form-invalid-feedback>
                                                </b-form-group>
                                            </validation-provider>

                                            <validation-provider name="Mot de passe" 
                                                :rules="{required: true, min: 4}"
                                                v-slot="validationContext">
                                                <b-form-group id="password-group" label="Mot de passe" label-for="password">
                                                    <b-form-input type="password" id="password" name="password" 
                                                                v-model="form.password" 
                                                                :state="getValidationState(validationContext)"
                                                                aria-describedby="password-feedback">
                                                    </b-form-input>
                        
                                                    <b-form-invalid-feedback id="password-feedback">
                                                        {{ validationContext.errors[0] }}
                                                    </b-form-invalid-feedback>
                                                </b-form-group>
                                            </validation-provider>

                                            <div class="row">
                                                <div class="col-6 text-left">
                                                    <b-button type="submit" name="login" id="login" class="btn btn-primary px-4" variant="primary">Connexion</b-button>
                                                </div>
                                                <div class="col-6 text-right">
                                                    <router-link to="/" class="btn btn-info px-4">
                                                        Accueil
                                                    </router-link>
                                                </div>
                                            </div>
                                        </b-form>
                                    </validation-observer>
                                </div>
                            </div>
                            <div class="card text-white py-5 d-md-down-none" style="width:44%">
                                <div class="card-body text-center">
                                    <div>
                                        <img src="@/assets/logo.png" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <Loading v-if="loading" />
    </div>
</template>

<script>
import '@/assets/css/coreui.css'
import Loading from '@/components/Loading.vue'
import FlashMsg from '@/components/FlashMsg.vue'

export default {
  name: 'OfficerAuth',
  components: {
    Loading,
    FlashMsg
  },
  data () {
    return {
      loading: false,  
      form: {
        email: '',
        password: ''
      },
      error: false,
      errorMsg: ''
    }
  },
  methods: {
    getValidationState ({ dirty, validated, valid = null }) {
        return dirty || validated ? valid : null
    },
    resetForm () {
        this.form = {
            email: null,
            password: null
        }

        this.$nextTick(() => {
            this.$refs.observer.reset()
        })
    },
    reset () {
        this.form = {
            email: null,
            password: null
        }
    },
    onSubmit () {
        this.loading = true

        if (this.error === true) { this.error = false }

        this.axios.post('/officers/login', {
            identifiant: this.form.email,
            password: this.form.password
        }).then((response) => {
            this.reset()
            let data = {
                id: response.data.data.id,
                name: response.data.data.name,
                first_name: response.data.data.first_name,
                email: response.data.data.email
            }
            this.$session.start()
            this.$session.set('officer', data)
            this.$router.push('/officer/dashboard')
        }).catch((err) => {
            console.log(err)
            this.error = true
            this.errorMsg = err.response.data.error
        }).finally(() => {
            this.loading = false
        })
    }
  }
}
</script>



// WEBPACK FOOTER //
// src/views/officer/OfficerAuth.vue

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

Message par webmaster » 23 nov. 2020, 21:55

Bonjour

La bonne syntaxe me semble plutot etre
this.errorMsg = err.message
au lieu de
this.errorMsg = err.response.data.error

Mais ce type de code me parait bien complexe pour démarrer dans le developpement web
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre