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);
    }
});

成功提交到服务器后，您可以在错误袋中调用clearAll方法以清除错误袋中的所有错误

如何显示Laravel Vue Js错误

1 个答案: