How to Show Laravel Vue Js Errors

Question

I am learning Vue.js I have successfully made this registration form and its working fine but I'm having a problem in showing errors.

register.vue page

<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>

This is my scripts in register.vue page working registration fine

<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>

This is the Errors I want to fetch...

How to fetch and how this errors on my vue components?

What's the problem? Assign error.response.data.errors into errors data field. — Ruslan
– Ruslan, Commented Aug 9, 2018 at 12:16
i don't know how to bind this and show to users i am beginner — Sid Heart
– Sid Heart, Commented Aug 9, 2018 at 12:50

Chinonso Chukwuogor · Accepted Answer · 2018-08-09 13:59:43Z

4

Note!! This solution is based on ES6 so you might have to transpile this to ES5

I had this issue a while back so I wrote a simple class to help manage validation messages from the server. https://gist.github.com/nonsocode/e6f34a685f8be1422c425e3a20a69a4b

You can use it by importing this to your template

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

and use it in your data method like so

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

In your template, you can check if there's a validation error and then decide how you ant to handle it. I'll assume you're using 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>

in the catch method of your ajax request,

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

After successfully submitting to your server, you can call the clearAll method on the errorbag to clear all errors from the bag

answered Aug 9, 2018 at 13:59

Chinonso Chukwuogor

5792 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sid Heart Over a year ago

i am not able to import your classes i am trying to use import ErrorBag from './resources/assets/js/errorbag.js' not compiling

Sid Heart Over a year ago

[Vue warn]: Error in data(): "ReferenceError: ErrorBag is not defined"

Chinonso Chukwuogor Over a year ago

you have to download the gist file i posted gist.github.com/nonsocode/e6f34a685f8be1422c425e3a20a69a4b. This is the ErrorBag class. Save it in whatever folder you like within your project. Then import it into your component

Sid Heart Over a year ago

i did but still showing me same error "import ErrorBag from './n-errorbag.js'"

jartaud Over a year ago

I added the following method because I wanted the array of messages for a custom input component. firstAll(key) { return this.errors[key] ? this.errors[key] : []; }

Collectives™ on Stack Overflow

How to Show Laravel Vue Js Errors

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related