如何使用 vuejs 在 laravel 刀片中显示验证错误

Question

我有一个带有表单的 laravel 视图，我想使用 axios 发送表单。

如果发布响应中返回错误，它应该在正确的位置显示错误。

我遇到了 2 个错误，我不知道如何解决它们

[Vue 警告]：实例上未定义属性或方法“错误” 但在渲染期间被引用。

[Vue 警告]：渲染错误：“TypeError：无法读取属性 'title' 未定义”

这是我的刀

@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(),


        }
    },