代码之家 › 专栏 › 技术社区 › Sid Heart

如何显示Laravel Vue Js错误

laravel-5.6 vue.js

1

Sid Heart · 技术社区 · 7 年前

我正在学习Vue.js,我已经成功地制作了此注册表,并且其工作正常但我在展示错误 .

寄存器.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组件上获取此错误?

1 回复 | 直到 7 年前

1

4

Chinonso Chukwuogor 7 年前

注意!! 此解决方案基于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 方法清除包中的所有错误