Сообщения проверки не отображаются с Vue.js 2 и Laravel 5.6 SPA, Axios

Question

Я получаю ответ 422 от сервера, когда ожидается, и правильные сообщения на стороне сервера появляются в консоли, но я не могу заставить эти сообщения отображаться в моем представлении.Любые идеи?

Я использую Laravel 5.6 с Vue.js 2 и Axios и следую урокам для Vus.js на laracasts (отличные уроки).

    <template>
        <div class="container">
            <div class="page-header">
                <h1>Create Person</h1>
        </div>
        <form @submit.prevent="onSubmit" action="POST">
            <div>
                <label for="fname" class="col-md-3 control-label ">First Name:</label>
                <div class="col-md-8">
                    <input type="text" name="fname" v-model='fname' id="fname" autocomplete='off'>
                    <span v-text="errors.get('fname')"></span>
                </div>
            </div>
            <div>
                <label for="lname" class="col-md-3 control-label ">Last Name:</label>
                <div class="col-md-8">
                    <input type="text" name="lname" v-model='lname' id="lname" autocomplete='off'>
                    <span v-text="errors.get('lname')"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="col-md-8 col-md-offset-4">
                            <button type="submit" class="btn btn-trans-green square pull-right card-1">
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </div>
         </form>
      </div>
  </template>

<script>

    class Errors {
        constructor(){
            this.errors = {};
        }
        get(field){
            if (this.errors[field]){
                return this.errors[field][0];
            }
        }
        record(errors){
            this.errors = errors;
        }
    }

    export default {
        data: function() {
            return {
                fname:'',
                lname:'',
                errors: new Errors()
            }
        },
        methods: {
          onSubmit(){
              axios.post('/customers', this.$data)
                      .then(response =>  alert('Success'))
                      .catch(error => 
  this.errors.record(error.response.data));
          }
        }
    }
  </script>

Answer 1

В Laravel 5.5 (я думаю) ответ JSON на ошибки валидации изменился с простого объекта ошибок на объект, содержащий ошибки и одно сообщение.Таким образом, чтобы получить доступ к сообщениям об ошибках в ответе, вам действительно нужно сделать:

this.errors.record(error.response.data.errors)

Я бы посоветовал, если у вас его еще нет, получить Vue Devtools аддон/ extension, чтобы помочь вам отладить ваш код и просто посмотреть, что происходит в целом.

Наконец, просто к сведению, Spatie некоторое время назад создал пакет (на основе урока Джеффа).Вы могли бы использовать его в качестве ориентира, если вы просто проходите уроки и хотите создать его самостоятельно.

Пространство - Проверка формы бэкэнда