vue.js - 如何显示 Laravel Vue Js 错误

Question

我正在学习 Vue.js 我已经成功制作了这个注册表并且工作正常 但我在显示错误时遇到了问题。

register.vue页面

<form @submit.prevent="RegisterUser" aria-label="Register">

   <div class="form-group row">
        <label for="name" class="col-md-4 col-form-label text-md-right">Name</label>

        <div class="col-md-6">
      <!-- <input id="name" v-model="name" type="text" class="form-control" name="name" value="" required autofocus> -->
           <input type="text" v-model="name" class="form-control" required="required" autofocus="autofocus">
        </div>
    </div>

    <div class="form-group row">
         <label for="email" class="col-md-4 col-form-label text-md-right">Email Address</label>

          <div class="col-md-6">
        <!-- <input id="email" v-model="email" type="email" class="form-control" name="email" value="" required> -->
             <input type="email" v-model="email" required autofocus class="form-control">
             {{ errors.email }}
          </div>
    </div>

    <div class="form-group row">
          <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

          <div class="col-md-6">
        <!-- <input id="password" v-model="password" type="password" class="form-control" required> -->
             <input type="password" v-model="password" class="form-control" required>
          </div>
    </div>

    <div class="form-group row">
          <label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>

          <div class="col-md-6">
        <!-- <input id="password-confirm" v-model="password_confirmation" type="password" class="form-control" required> -->
             <input type="password" v-model="confirm_password" class="form-control" required>
          </div>
    </div>

    <div class="form-group row mb-0">
         <div class="col-md-6 offset-md-4">
              <button type="submit" class="btn btn-primary">
                    Register
               </button>
         </div>
    </div>
</form>

这是我在 register.vue 页面工作注册正常的脚本

<script>
export default {

    // props: ['name'],
    data: function() {
        return {
            name: '',
            email: '',
            password: '',
            confirm_password: '',
            errors: {},
        };
    },

    methods: {
      RegisterUser() {
       axios.post('/register', {
            name: this.name,
            email: this.email,
            password: this.password,
            password_confirmation:this.confirm_password
          })
            .then(function(response){
                swal({
                  title: "Good job!",
                  text: "Login Success",
                  icon: "success",
                  button: "Okay",
                })
                .then((willDelete) => {
                  if (willDelete) {
                    window.location.href = '/home';
                  }
                });
            })

          .catch(function (error) {
            console.log(error.response.data);
          });
      }  
    }
  }
</script>

这是我要获取的错误...

如何获取以及如何在我的 vue 组件上出错？

Answer 1

注意!!此解决方案基于 ES6，因此您可能需要将其转换为 ES5

不久前我遇到了这个问题，所以我编写了一个简单的类来帮助管理来自服务器的验证消息。 https://gist.github.com/nonsocode/e6f34a685f8be1422c425e3a20a69a4b

您可以通过将其导入您的模板来使用它

import ErrorBag from 'path-to-errorbag-class'

并像这样在你的data方法中使用它

data: function() {
    return {
        name: '',
        email: '',
        password: '',
        confirm_password: '',
        errors: new ErrorBag,
    };
},

在您的模板中，您可以检查是否存在验证错误，然后决定如何处理它。我假设您使用的是 bootsrap 4

<div class="form-group row">
     <label for="email" class="col-md-4 col-form-label text-md-right">Email Address</label>

      <div class="col-md-6">
         <input type="email" v-model="email" required autofocus :class="{'form-control': true, 'is-invalid': errors.has('email')}">
         <div class="invalid-feedback" v-if="errors.has('email')" >{{ errors.first('email') }}</div>
      </div>
</div>

在您的 ajax 请求的 catch 方法中，

axios(...)
.then(...)
.catch(function (error) {
    if (error.response && error.response.status == 422) {
        const errors = err.response.data.errors;
        this.errors.setErrors(errors);
    }
});

成功提交到你的服务器后，你可以调用errorbag​​上的clearAll方法来清除包中的所有错误