Как отобразить ошибки валидации в Laravel Blade с помощью Vuejs

Question

У меня есть представление laravel, которое имеет форму, и я хочу использовать axios для отправки формы.

Если в ответном сообщении есть ошибки, он должен показать ошибки в правильных местах.

Я получаю 2 ошибки, и я не уверен, как их исправить

[Vue warn]: свойство или метод «ошибки» не определены в экземпляре, но на них ссылаются во время рендеринга.

[Vue warn]: ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'title' undefined"

Вот мой блейд

@extends('layouts.admin')

@section('content')
<h1 class="h3 mb-3 text-gray-800">News</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quisquam ut perspiciatis, repudiandae nulla animi iste vel, praesentium repellendus molestias aliquid consequatur, earum rem qui error voluptates eius enim consequuntur!</p>
<div id="news-form">
    <div class="row">
        <div class="col-md-8">
            <form @submit.prevent="submit" method="POST">

                <div class="form-group row" v-bind:class="{ ' has-error': errors.title }">
                    <label for="inputName" class="col-sm-4 col-form-label">Title</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" placeholder="News Title" v-model="news.title">
                        <form-error v-if="errors.title" :errors="errors">
                            @{{ errors.title }}
                        </form-error>
                    </div>
                </div>

                 <div class="form-group row" v-bind:class="{ ' has-error': errors.subtitle }">
                    <label for="inputName" class="col-sm-4 col-form-label">Subtitle</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" placeholder="News Subtitle" v-model="news.subtitle">
                        <form-error v-if="errors.subtitle" :errors="errors">
                            @{{ errors.subtitle }}
                        </form-error>
                    </div>
                </div>

                 <div class="form-group row" v-bind:class="{ ' has-error': errors.body }">
                    <label for="inputName" class="col-sm-4 col-form-label">Body</label>
                    <div class="col-sm-8">
                        <textarea name="body" class="form-control" rows="5" placeholder="News body" v-model="news.body"></textarea>
                        <form-error v-if="errors.body" :errors="errors">
                            @{{ errors.body }}
                        </form-error>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Create Post</button> 
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/news.js') }}"></script>
@endpush

ивот мой компонент (news.js)

import Vue from 'vue';

// import FormError component
import FormError from './components/FormError.vue';

// get csrf token
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

// instantiate a new Vue instance
new Vue({
    // mount Vue to .container
    el: '#news-form',

   // define components
    components: {
        FormError,
    },

    data() {
        return {
            post: {
                title: '',
                subtitle: '',
                body: '',
            },

            submitted: false,

            // array to hold form errors
            errors: {},
        }
    },

    methods: {
        createPost() {
            let post = this.post;

            axios.post('create-post', post).then(response => {
                // form submission successful, reset post data and set submitted to true
                this.post = {
                    title: '',
                    body: '',
                };

                // clear previous form errors
                this.$set('errors', '');

                this.submitted = true;
            }).catch(error => {
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors || {};
                }
            });
        }
    }
});

Answer 1

Я предлагаю вам создать такой класс

export default class Errors{
constructor(){
    this.errors = {};
}

get(field){
    if(this.errors[field]){
        return this.errors[field][0];
    }
}
record(errors)
{
    this.errors=errors;
}
clear(field)
{
    console.log(field);
    delete this.errors[field];
}

}

, а затем использовать axsios, например:

axios.post('/yourroute',{
                yourparams:value,
            }).then(function (response) {

                //Show success Message


            }).catch(error => this.errors.record(error.response.data.errors));

, не говоря уже о том, что вам следует позвонитьКласс перед использованием, как это:

import Errors  from '../classes.js';

вам также нужно определить ошибку в ваших данных

        data: function () {
        return {

            errors: new Errors(),


        }
    },