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

Posted 2023-03-15

【中文标题】如何使用 vuejs 在 laravel 刀片中显示验证错误

【英文标题】：How to display validation errors in laravel blade with vuejs

【发布时间】：2020-02-14 05:05:09

【问题描述】：

我有一个带有表单的 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 || ;
                
            );
        
    
);

【参考方案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(),


        
    ,

【讨论】：

我仍然收到关于 Property or method "errors" is not defined 的相同错误

我更新了我的答案，你应该首先在你的数据中定义错误