laracasts / Vue-Forms

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19
396 stars 204 forks source link

No error message? #16

Closed Sjoerd closed 6 years ago

Sjoerd commented 7 years ago

Hello, The error messages do not appear in the labels, my code:

<template>
    <form>
        <div class="form-group">
            <label for="name">name</label>
            <input type="text" id="name" name="name" @keydown="errors.clear('name')" class="form-control" v-model="form.name">
            <span class="error" v-if="errors.has('form.name')" v-text="errors.get('form.name')"></span>
        </div>
        <div class="form-group">
            <label for="email">Mail</label>
            <input type="email" id="email" name="email" class="form-control" v-model="form.email">
            <span class="error" v-if="errors.has('email')" v-text="errors.get('email')"></span>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" class="form-control" v-model="form.password">
            <span class="error" v-if="errors.has('form.password')" v-text="errors.get('form.password')"></span>
        </div>
        <button type="submit" class="btn btn-primary" :disabled="form.errors.any()" @click.prevent="signup">Signup</button>
    </form> 
</template>

<script>
    export default {
      data() {
        return {
          form: new Form({
            name: '',
            email: '',
            password: '',
          })
        }
      },

      methods: {
        signup() {
          this.form.post('api/register')
                   .then(response => alert("TEST"))
                   .catch(errors => console.log(errors. ));
        },
        onSuccess() {
          alert("T TEST");
        }
      },
      }
</script>

If I do console.log(error.errors), I see the following: https://gyazo.com/2f6dd80eceb8c4311d63df714f7a5571

mario82dd commented 7 years ago

I think this is caused by the new Laravel 5.5 Exception Format. Take a look at Upgrade Guide there is a section belongs to the Responses.

In addition, the default format for JSON validation errors has changed

I just flyed over it and not tested it, but i think if you change record(errors) { this.errors = errors; } into record(errors) { this.errors = errors.errors; } but as i said, not tested yet