PHP Erro no register de um login com vue.js e laravel

[Alessandro Kennedy]

<template>
  <div class="container">
    <div class="card">
      <div class="card-header">Criar Conta</div>
      <div class="card-body">
        <div class="col-md-6 offset-md-3">
          <form v-on:submit.prevent="onSubmit">
              
              <div class="alert alert-danger" v-if="errors.length">
                  <ul class="mb-0">
                      <li v-for="(error,index) in errors" :key="index">{{error}}</li>
                  </ul>
              </div>
            <div class="form-group">
              <label>Nome</label>
              <input
                type="text"
                class="form-control"
                placeholder="Nome..."
                v-model="name"
              />
            </div>

            <div class="form-group">
              <label>E-mail</label>
              <input
                type="email"
                class="form-control"
                placeholder="E-mail..."
                v-model="email"
              />
            </div>

            <div class="form-group">
              <label>Senha</label>
              <input
                type="password"
                class="form-control"
                placeholder="Senha..."
                v-model="password"
              />
            </div>
            <div class="form-group">
              <label>Confirmação de Senha</label>
              <input
                type="password"
                class="form-control"
                placeholder="Confirme sua senha..."
                v-model="passwordAgain"
              />
            </div>
            <button class="btn btn-success">Registrar</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  props: ["app"],
  data() {
    return {
      name: "",
      email: "",
      password: "",
      passwordAgain: "",
      errors: [],
      
    };
  },
  methods: {
    onSubmit() {
      this.errors = [];
      if (!this.name) {
        this.errors.push("O campo nome não pode ficar em branco");
      }

      if (!this.email) {
        this.errors.push("O e-mail nome não pode ficar em branco");
      }

      if (!this.password) {
        this.errors.push("O campo senha não pode ficar em branco");
      }

      if (this.password !== this.passwordAgain) {
        this.errors.push("Os campos de senhas devem ser iguais");
      }

      if (!this.errors.length) {
        const data = {
          name: this.name,
          email: this.email,
          password: this.password,
        };

        this.app.req.post("auth/register", data)
          .then((response) => {
            this.app.user = response.data;
            this.$router.push("/");
          })
          .cath((error) => {
            this.errors.push(error.response.data.error);
          });
      }
    },
  },
};
</script>

<style >
</style>

 Ao realizar o submit eu recebo o erro: 

"TypeError: Cannot read property 'req' of undefined"

found in

---> <Register> at resources/js/pages/Register.vue
       <App> at resources/js/App.vue

 

[GabrielSennaMs]

@Alessandro Kennedy Bom essa sua variável "this.app.req <-- req não foi definida". 

 

Você está usando qual API para fazer essas requisições?

normalmente é o axios ou vue-htttp.

 

Verifica se você instalo e configuro essa API no variável req.

[Alessandro Kennedy]

Sim esta configurado o Axios,o erro não esta no "req" e sim no "this.app" que está undefined

[GabrielSennaMs]

@Alessandro Kennedy Bom se você está passando um props com o nome de app e não coloco o axios no indece req, como você quer acessar isso?

 

Geralmente você defino isso no objeto de inicialização com vue ou declara uma constante com o axios.

 

Você pode import.

 

import axios from 'axios';

export default {
  name: "register",
  props: ['app'],
  data()
  {
    return {
      name: "",
      email: "",
      password: "",
      passwordAgain: "",
      errors: []
    };
  },
  methods: {
    async onSubmit() {
      this.errors = [];
      
      if (!this.name) {
        this.errors.push("O campo nome não pode ficar em branco");
      }

      if (!this.email) {
        this.errors.push("O e-mail nome não pode ficar em branco");
      }

      if (!this.password) {
        this.errors.push("O campo senha não pode ficar em branco");
      }

      if (this.password !== this.passwordAgain) {
        this.errors.push("Os campos de senhas devem ser iguais");
      }

      if (!this.errors.length) {
        const data = {
          name: this.name,
          email: this.email,
          password: this.password,
        };

        await axios.post("auth/register", data)
          .then((response) => {
            this.app.user = response.data;
            this.$router.push("/");
          })
          .cath((error) => {
            this.errors.push(error.response.data.error);
          });
      }
    },
  },
};